/*------------------------------------------------------------------
    COlored table
-------------------------------------------------------------------*/
.coloredTable table td {
    border: 1px solid #ccc !important;
    border-collapse: collapse !important;
}

.coloredTable table td {
    padding: 5px !important;
}

.coloredTable table {
    box-shadow: 10px 8px 22px 0px rgba(0,0,0,0.10);
    -webkit-box-shadow: 10px 8px 22px 0px rgba(0,0,0,0.10);
    -moz-box-shadow: 10px 8px 22px 0px rgba(0,0,0,0.10);
}
    /* Style header cells in tables with headers */
    .coloredTable table thead th, .coloredTable thead {
        background-color: #8CCED7 !important;
        color: darkblue !important;
        padding: 12px !important;
    }

    /* Style first row in tables *without* thead */
    .coloredTable table:not(:has(thead)) tr:first-child td {
        background-color: #BEE1E6 !important;
        color: black !important;
        font-weight:bold;
        padding: 12px !important;
    }
/*------------------------------------------------------------------
-------------------------------------------------------------------*/
.indexContextExperts{
    text-align:center !important;
}
.indexContextExperts img{
    width:100px !important;
    height:100px !important;
}
.underborder{
    border-bottom:1px dashed #848484;
    padding:10px;
}
/*------------------------------------------------------------------
    king loading - loader
-------------------------------------------------------------------*/
.king-parent-loader {
    justify-content: center;
    width: 100%;
    display: flex;
}

.king-loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: kingspin 2s linear infinite;
}

@keyframes kingspin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*------------------------------------------------------------------
    responsive
-------------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
    .header-title{
        margin-top:20px !important;
    }
    .page-link {
        margin: 0 !important;
        padding: 5px !important;
    }
    .scriptcounterContext {
        width: 100% !important;
        text-align: center !important;
    }

    .rankedscriptwriterrightside {
        display: none;
    }
    .rankedscriptwriterleftside img {
        width:100px;
    }

    .rankedscriptwriterleftside {
        width: 100% !important;
        padding:30px;
    }

    .scriptcounterText {
        font-size: 100px !important;
    }
}

@media only screen and (max-width: 400px) {
    h3, h4 {
        font-size: 20px !important;
    }

    .commentTitle {
        font-size: 40px !important;
    }
}

@media only screen and (max-width: 1000px) {
    .banner-hero .breadcrumb {
        display:block !important; 
    }
}

/*------------------------------------------------------------------
    script search
-------------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
    .swticherGenreTheme {
        text-align: center;
    }
}
/*------------------------------------------------------------------
    blog
-------------------------------------------------------------------*/
.articlepostbody h3 {
    font-size: 20px;
    color: #ba6d00;
}

.articlepostbody h4 {
    font-size: 25px;
    color: #1C3056;
}

.blog-img-user {
    padding: 0px 0px 0px 0px;
}
/*------------------------------------------------------------------
   comments
-------------------------------------------------------------------*/
.item-comment {
    width: unset !important;
    padding: 0 0 0 0 !important;
    margin-bottom: 0 !important;
}

.box-comments ul li .item-comment .blog-img-user, .blog-img-user .img-user-round {
    position: unset !important;
}

.repliedButton {
    width: 50px;
}

.lineBreaksComments {
    white-space: pre-line;
    border-bottom: 1px #848484 dashed;
    border-right: 1px #848484 dashed;
    padding: 20px;
    margin-bottom: 5px;
    margin-top: 5px;
    border-radius: 15px;
}

.box-comments {
    display: inline-block;
    width: 100%;
    padding: 60px 0px 0px 0px;
}

    .box-comments ul li {
        display: inline-block;
        width: 100%;
    }

        .box-comments ul li .item-comment {
            display: inline-block;
            width: 100%;
            padding: 0px 250px 0px 0px;
            position: relative;
            margin-bottom: 40px;
        }

            .box-comments ul li .item-comment .blog-img-user {
                position: absolute;
                top: 0px;
                right: 0px;
                margin-top: 0px;
            }

        .box-comments ul li ul {
            padding-right: 56px;
        }

    .box-comments .text-comment {
        border-radius: 16px 0px 16px 16px;
        color: #101828;
        padding: 20px;
    }
/*------------------------------------------------------------------
    mage pages
-------------------------------------------------------------------*/
.articlepostbody img {
    height: 100% !important;
}

.articlepostbody {
    line-height: 30px;
}

    .articlepostbody a {
        color: blue !important;
    }

        .articlepostbody a:hover {
            color: red !important;
            text-decoration: underline !important;
            text-decoration-style: dashed; /* Apply dashed underline */
            transition: all 0.5s linear;
        }

.lineBreaks {
    white-space: pre-wrap;
}

.banner-hero.banner-1 .container {
    z-index: 0 !important;
}

.pagination {
    justify-content: center;
    display: flex;
    width: unset !important;
}

.banner-hero.banner-breadcrums {
    padding: 10px !important;
    padding-top: 30px !important;
    background-color: #FDC72A !important;
}

    .banner-hero.banner-breadcrums .text-heading-2 {
        color: white !important;
    }

@media only screen and (max-width: 991px) {
    .nav-breadcrums {
        padding: 10px !important;
    }

    .row.swticherGenreTheme {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        width: 100%; /* Make sure it takes full width */
        margin-bottom: 15px; /* Add spacing between stacked rows */
    }

        .row.swticherGenreTheme .col {
            width: 100%; /* Make each column take full width */
        }

    .row.homescriptshow {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        width: 100%; /* Make sure it takes full width */
        margin-bottom: 15px; /* Add spacing between stacked rows */
    }

        .row.homescriptshow .col, .row.homescriptshow * {
            width: 100% !important; /* Make each column take full width */
        }
}

.text-body-lead-large {
    color: #101828 !important;
}

.king-arrow-straight {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M8 10L8 14L6 14L0 8L6 2L8 2L8 6L16 6L16 10L8 10Z' fill='%239C6D32'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.king-arrow-bend {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 16H5L0 11L5 6H6V10H12V1H14V12H6V16Z' fill='%235991CA'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: inline-block;
    width: 16px;
    height: 16px;
}
/*------------------------------------------------------------------
    menu
-------------------------------------------------------------------*/
.main-menu li li {
    width: 300px !important;
}

.main-menu .sub-menu {
    z-index: 99999999 !important;
}

.banner-hero.banner-2 .container {
    z-index: 0 !important;
}
/*------------------------------------------------------------------
    badge
-------------------------------------------------------------------*/
.badge-danger {
    background-color: #dc3545; /* Bootstrap's danger red */
}

.badge-success {
    background-color: #4cd964; /* Bootstrap's danger red */
}

.badge-primary {
    background-color: #71b6f9; /* Bootstrap's danger red */
}

.badge-pink {
    background-color: #ff8acc; /* Bootstrap's danger red */
}

.badge-purple {
    background-color: #5b69bc; /* Bootstrap's danger red */
}

.badge-warning {
    background-color: #f9c851; /* Bootstrap's danger red */
}
/*------------------------------------------------------------------
    Buttons
-------------------------------------------------------------------*/
.homebtn-success {
    color: #fff;
    background-color: #10c469 !important;
    border-color: #10c469;
}

.homebtn-primary {
    color: #fff;
    background-color: #71b6f9;
    border-color: #71b6f9;
}

.homebtn-danger {
    color: #fff;
    background-color: #ff5b5b;
    border-color: #ff5b5b;
}

.homebtn-info {
    color: #fff;
    background-color: #35b8e0;
    border-color: #35b8e0;
}

.homebtn-default {
    color: #fff;
    background-color: #101828;
    border-color: #35b8e0;
}

.waves-effect {
    position: relative !important;
    cursor: pointer !important;
    display: inline-block !important;
    overflow: hidden !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.homebtn {
    width: 100%;
    display: inline-block !important;
    font-weight: 400 !important;
    color: #fff !important;
    text-align: center !important;
    vertical-align: middle !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    border: 1px solid transparent !important;
    padding: .45rem .9rem !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
    border-radius: .15rem !important;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

    .homebtn:hover {
        box-shadow: inset 0px 0px 7px 1px #6E6E6E !important;
    }
/*------------------------------------------------------------------
    modal
-------------------------------------------------------------------*/
.modal .modalClose {
    font-size: 40px;
    color: lightgray !important;
    cursor: pointer;
}
/*------------------------------------------------------------------
    dot
-------------------------------------------------------------------*/
.kingReddot {
    height: 25px;
    width: 25px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
}

.kingGreendot {
    height: 25px;
    width: 25px;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
}

.kingGraydot {
    height: 25px;
    width: 25px;
    background-color: gray;
    border-radius: 50%;
    display: inline-block;
}

.kingBlueText {
    color: blue !important;
    font-weight: normal !important;
    font-size: unset !important;
}

.kingWhiteText {
    color: #fff !important;
    font-weight: normal !important;
    font-size: unset !important;
}

.kingBrownText {
    color: #cc9f1b !important;
    font-weight: normal !important;
    font-size: unset !important;
}

.kingBlackText {
    color: black !important;
    font-weight: normal !important;
    font-size: unset !important;
}

.kingRedText {
    color: red !important;
    font-weight: normal !important;
    font-size: unset !important;
}

.kingGreenText {
    color: green !important;
    font-weight: normal !important;
    font-size: unset !important;
}

.kingGrayText {
    color: gray !important;
    font-weight: normal !important;
    font-size: unset !important;
}

.kingLightGrayBg {
    background-color: #E1E4E9 !important;
}
/*------------------------------------------------------------------
    general
-------------------------------------------------------------------*/
.ltr {
    direction: ltr !important;
    ;
}

.img-crop-square {
    object-fit: cover !important;
    aspect-ratio: 1/1 !important;
}

.king ul {
    padding-right: 20px !important;
}

.king li {
    list-style-type: circle !important;
}

.centerText {
    text-align: center;
}

.center_and_justify {
    text-align: justify;
    text-justify: inter-word;
}

small {
    font-size: 11px !important;
}

.kingWidth100 {
    width: 100% !important;
}

.king-input {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    font-size: 16px;
    margin-bottom: 2px;
}

.header-profile {
    border-radius: 50% !important;
    width: 130px !important;
    height: 120px !important;
    text-align: center !important;
    align-items: center !important;
    align-content: center !important;
}

    .header-profile h6 {
        padding-top: 4px;
        color: white;
    }

.innerAnchor a {
    color: #cc9f1b !important;
}

.squareIcon {
    padding: 5px;
    width: 23px;
    border: 1px solid #ccc;
    color: #848484;
    padding-right: 7px;
}

.cursorPointer {
    cursor: pointer;
}

#meter {
    border: 1px solid #ccc;
    cursor: help;
}

.header .main-header .header-right .block-signin .btn.btn-default {
    width: 200px;
}

@media only screen and (max-width: 600px) {
    .header .main-header .header-right .block-signin .btn.btn-default {
        width: 250px;
    }
}
/*------------------------------------------------------------------
    Swtich Buttons
-------------------------------------------------------------------*/
.holderSwitcher {
    text-align: center;
}

.custom-control.material-switch {
    --color: #26a69a;
    padding-left: 0;
}

    .custom-control.material-switch .material-switch-control-input {
        display: none;
    }

        .custom-control.material-switch .material-switch-control-input:checked ~ .material-switch-control-indicator::after {
            background-color: var(--color);
            left: 17px;
        }

    .custom-control.material-switch .material-switch-control-indicator {
        display: inline-block;
        position: relative;
        margin: 0 10px;
        top: 4px;
        width: 32px;
        height: 16px;
        background: #ddd;
        border-radius: 16px;
        transition: 0.3s;
    }

        .custom-control.material-switch .material-switch-control-indicator::after {
            content: '';
            display: block;
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            transition: 0.3s;
            top: -1px;
            left: -1px;
            background: #fdfdfd;
            box-shadow: 0 2px 10px #aaa;
        }

.custom-control.ios-switch {
    --color: #4cd964;
    padding-left: 0;
}

    .custom-control.ios-switch .ios-switch-control-input {
        display: none;
    }

        .custom-control.ios-switch .ios-switch-control-input:active ~ .ios-switch-control-indicator::after {
            width: 20px;
        }

        .custom-control.ios-switch .ios-switch-control-input:checked ~ .ios-switch-control-indicator {
            border: 10px solid var(--color);
        }

            .custom-control.ios-switch .ios-switch-control-input:checked ~ .ios-switch-control-indicator::after {
                top: -8px;
                left: 4px;
            }

        .custom-control.ios-switch .ios-switch-control-input:checked:active ~ .ios-switch-control-indicator::after {
            left: 0px;
        }

    .custom-control.ios-switch .ios-switch-control-indicator {
        display: inline-block;
        position: relative;
        margin: 0 10px;
        top: 4px;
        width: 32px;
        height: 20px;
        background: #fff;
        border-radius: 16px;
        transition: 0.3s;
        border: 2px solid #ddd;
    }

        .custom-control.ios-switch .ios-switch-control-indicator::after {
            content: '';
            display: block;
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 16px;
            transition: 0.3s;
            top: 0px;
            left: 0px;
            background: #fff;
            box-shadow: 0 0 2px #aaa, 0 2px 5px #999;
        }

.custom-control.border-switch {
    --color: #4cd964;
    padding-left: 0;
}

    .custom-control.border-switch .border-switch-control-input {
        display: none;
    }

        .custom-control.border-switch .border-switch-control-input:checked ~ .border-switch-control-indicator {
            border-color: var(--color);
        }

            .custom-control.border-switch .border-switch-control-input:checked ~ .border-switch-control-indicator::after {
                left: 14px;
                background-color: var(--color);
            }

    .custom-control.border-switch .border-switch-control-indicator {
        display: inline-block;
        position: relative;
        margin: 0 10px;
        top: 4px;
        width: 32px;
        height: 20px;
        background: #fff;
        border-radius: 16px;
        transition: 0.3s;
        border: 2px solid #ccc;
    }

        .custom-control.border-switch .border-switch-control-indicator::after {
            content: '';
            display: block;
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transition: 0.3s;
            top: 2px;
            left: 2px;
            background: #ccc;
        }

.custom-control.teleport-switch {
    --color: #4cd964;
    padding-left: 0;
}

    .custom-control.teleport-switch .teleport-switch-control-input {
        display: none;
    }

        .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator {
            border-color: var(--color);
        }

            .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::after {
                left: -14px;
            }

            .custom-control.teleport-switch .teleport-switch-control-input:checked ~ .teleport-switch-control-indicator::before {
                right: 2px;
                background-color: var(--color);
            }

    .custom-control.teleport-switch .teleport-switch-control-indicator {
        display: inline-block;
        position: relative;
        margin: 0 10px;
        top: 4px;
        width: 32px;
        height: 20px;
        background: #fff;
        border-radius: 16px;
        transition: 0.3s;
        border: 2px solid #ccc;
        overflow: hidden;
    }

        .custom-control.teleport-switch .teleport-switch-control-indicator::after {
            content: '';
            display: block;
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transition: 0.3s;
            top: 2px;
            left: 2px;
            background: #ccc;
        }

        .custom-control.teleport-switch .teleport-switch-control-indicator::before {
            content: '';
            display: block;
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transition: 0.3s;
            top: 2px;
            right: -14px;
            background: #ccc;
        }