/* dashboard-style.css */

.parent{
    height: 100vh;
}
.parent>.row{
    display: flex;
    align-items: center;
    height: 100%;
}
.col img{
    height:100px;
    width: 100%;
    cursor: pointer;
    transition: transform 1s;
    object-fit: cover;
}
.col label{
    overflow: hidden;
    position: relative;
}
.imgbgchk:checked + label>.tick_container{
    opacity: 1;
}
/*         aNIMATION */
.imgbgchk:checked + label>img{
    transform: scale(1.25);
    opacity: 0.3;
}
.tick_container {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    cursor: pointer;
    text-align: center;
}
.tick {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 6px 12px;
    height: 40px;
    width: 40px;
    border-radius: 100%;
}


/*h1, h2, h3, p, li, span, body{
font-family: "Inter", sans-serif !important;
} */

.title-tabs img{
    margin-right: 12px;
    display: flex;
    float: left;
}
.title-tabs h1{
    vertical-align: middle;
    display: table;
    color: #1F2937;
    font-size: 29px;
    font-style: normal;
    font-weight: 900;
    line-height: 18px; /* 62.069% */
}
.title-tabs h1 span {
    display: block;
    color: #718096;
    font-size: 12px;
    margin-top: 10px;
    font-weight: 400;
    line-height: 18px; /* 150% */
}

#wpcontent {
    background: #F4F7FE;
    padding-top: 20px;
}


/*---------- vertical tab nav */

#vertical_tab_nav {
    display: block;
    width: 100%;
    margin-top:30px;
}

.tabs {
    float: left;
    margin: 0px;
    padding: 0px;
    list-style: none;
    overflow: hidden;
    width: 17.5%;
    border-radius: 10px 0 0 10px;
    margin-right: 10px;
}


#vertical_tab_nav li:last-child {
    margin-bottom: 0px;
    border-bottom: 0px;
}

#vertical_tab_nav li a {
    display: block;

}

#vertical_tab_nav li a.selected {
    background: #fff;
    color: #000;
}

.tab_container {
    display: block;

}

#vertical_tab_nav div article {
    display: none;
    margin: 0px;
    color: #555;
}

#vertical_tab_nav div article p {
    margin: 0px 0px 20px 0px;
}

@media screen and (max-width: 781px) {
    .tab_container {
        display: block;
        margin: 0 ;
        width: 95%;
        border-top: none;
        border-radius: 0;
    }
    .d_active {
        background: #fff;
    }
}

.tabs {
    display: none;
}


   .tab_drawer_heading {
       margin: 0;
       font-size: 14pt;
       color: #fff;
       text-decoration: none;
       padding: 3%;
       background: #239EE4 ;
       background: linear-gradient(180deg, #3EC7EE 0%, #239EE4 100%);
   }

@media screen and (min-width: 768px) {
    .banner {
        padding-top: 100px;
    }
    .tab_container {
        float: left;
        border-radius: 0 10px 10px 0;
        width:50%;
    }
    .tabs {
        display: block;
    }
    .tab_drawer_heading {
        display: none;
    }
    article {
        padding: 0;
    }
}


#vertical_tab_nav li a{
    color: #718096;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin: 0;
    line-height: 20px;
    padding: 15px;
}


#vertical_tab_nav li a:hover, #vertical_tab_nav li .selected{
    color: #2563EB !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    text-decoration: none;
}

#vertical_tab_nav li a img {
    margin-right: 10px;
}
#vertical_tab_nav li a:hover .none-active-img {
    display: none;
}
#vertical_tab_nav li a:hover .active-img {
    display: inline-block;
}

#vertical_tab_nav li .selected .active-img {
    display: inline-block;
}
#vertical_tab_nav li .selected .none-active-img {
    display: none;
}
#vertical_tab_nav li a{

    border-radius: 10px;
    padding: 15px;
}

#vertical_tab_nav li a:hover, #vertical_tab_nav li .selected
{
    background: #EFF6FF !important;
}
#vertical_tab_nav li a:focus {
    outline: none !important;
    box-shadow:none;
}
#vertical_tab_nav .tabs{
    padding: 0 15px;
    background: #fff;
}
.title-tabs {
    padding: 25px 0px;
    border-bottom: 2px solid#F4F7FE;
    margin-bottom: 37px;
}


.banner {
    text-align: center;
    padding-bottom: 50px;
}

.tittle-content-tab-top h2{
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    color: #1F2937;
}
.tittle-content-tab-top p{
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    color: #718096;
}


.inputGroup {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;
}
.inputGroup label {
    padding: 11px 0px 0 50px;
    width: 100%;
    display: block;
    text-align: left;
    color: #3c454c;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;
}
.inputGroup label:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    opacity: 0;
    z-index: -1;
}
.inputGroup label:after {
    width: 20px;
    height: 20px;
    content: "";
    border: 1px solid #d1d7dc;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: 2px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label {
    color: #000;
}
.inputGroup input:checked ~ label:before {
    transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
}
.inputGroup input:checked ~ label:after {
    background-color:#3EC7EE;
    border-color: #3EC7EE;


}
.inputGroup input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}



.inputGroup {
    width: calc(87% / 5);
    float: left;
    border-radius: 5px;
    border: 1px solid #E6F1FF;
    margin-right: 15px;
}


.inputGroup label p{
    margin-bottom: 0 !important;
    font-size: 13px;
    font-weight: 600;
    margin-top: 3px !important;
    text-align: left;
    color: #1F2937;
}

.switch {
    width: 40px;
    height: 21px;
    margin: 0;
    display: inline-block;
}

.switch-checkbox {
    display: none !important;
}

.switch-label {
    width: 100%;
    height: 100%;
    background-color: #F1F2F4;
    display: block;
    padding: 1.8px 2px;
    border-radius: 54px;
}

.switch-toggle {
    float: left;
    width: 49%;
    height: 18px;
    background-color: #FFFFFF;
    border-radius: 50%;
    position: relative;
    border: 2px solid #3B82F6;
}

.switch-checkbox:checked ~ .switch-label {
    background: linear-gradient(180deg, #3EC7EE 0%, #239EE4 100%);
}

.switch-checkbox:checked ~ .switch-label .switch-toggle {
    float: right
}

.switch-rectangle .switch-label {
    border-radius: 0;
}

.switch-rectangle .switch-toggle {
    border-radius: 0;
}
.active-img {
    display: none;
}

.disable-page-content-ban p{
    display: inline-block;
    color: #1F2937;
    font-size: 14px;
    font-weight: 600;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
}
.disable-page-content-ban {
    margin-top: 20px;
}
.color-w {
    background: #fff;
    padding: 30px 3% 3% 3%;
    border-radius: 5px;
}


.choose-banner p, .flip-btn p{
    color: #1F2937;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0 !important;
    display: inline-block;
}
.banner-posit #single-select {
    width: 43%;
    display: inline-block;
    margin-left: 8px;
    padding: 0 20px 0 8px;
    border-radius: 5px;
    border: 1px solid #E6F1FF;
    color: #718096;
    font-weight: 400;
    font-size: 13px;
    font-family: "Inter", sans-serif !important;
}
.banner-posit, .colors-banner {
    background: #fff;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
}
.col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
    float: left;
}
.flip-btn {
    display: flex;
}
.flip-btn p, .disable-page-content-ban {
    margin-right: 15px !important;
}
.flip-btn {
    margin-top: 8px;
}

.colors-banner .inputGroup label{
    padding: 12px 0 19px 46px;
    margin: 0;
}
.colors-banner .inputGroup p{
    color: #1F2937;
    font-size: 14px;
    font-weight: 600;
}
.colors-banner {
    padding: 25px;
}
.colors-banner h2{
    color: #1F2937;
    font-size: 14px;
    font-weight: 600;
}

.title-trans h2{
    color: #1F2937;
    font-size: 16px;
    font-weight: 700;
}

.title-trans p{
    color: #718096;
    font-size: 12px;
    font-weight: 400;

}
.title-trans {
    padding: 20px;
}
.title-banner-cook-lang, .form-group.description-fields-group, .trans-btn-text {
    background: #fff;
    border-radius: 5px;
    padding: 20px;
}
.form-group.description-fields-group{
    margin-top: 20px;
}
#exampleInputtitle {
    width: 86%;
    float: right;
}
.form-group.title-fields-froup label, .form-group.description-fields-group label{
    color: #333;
    font-size: 16px;
    font-family: "Inter", sans-serif !important;
    font-weight: 700;
    margin-bottom: 0;
    margin-top: 5px;
}
.form-group.title-fields-froup {
    margin-bottom: 7px;
}
.form-group.title-fields-froup input, .form-group.description-fields-group input{
    border-radius: 5px;
    border: 1px solid #CBD5E0;
    color:  #718096;
    font-family: "Inter", sans-serif !important;
    font-size: 16px;
    font-weight: 400;
}

#exampleInputtitle:focus, #exampleFormControlTextarea1:focus{
    box-shadow: none ;
}

.form-group.description-fields-group label {
    margin-bottom: 24px;
}
.form-group.description-fields-group {
    padding-bottom: 36px;
}
#exampleFormControlTextarea1 {
    padding: 30px 30px 40px;
}

.trans-btn-text .title-fields-froup input{
    width: 56%;
    float: right;
    margin-right: 31px;
}
.trans-btn-text {
    margin-bottom: 20px;
}

.button-pref-012 input {
    width: 76%;
    float: right;
}
.title-trans.pref-mod-trns-2 {
    margin-top: 35px;
}
.banner img {
    max-width: 100%;
}
@media (max-width: 1770px) {
    .tab_container {
        width: 80%;
    }
    .tabs {
        width: 18.5%;
    }
}

@media (max-width: 1441px) {
    .tab_container {
        width: 75%;
    }
    .tabs {
        width: 22.5%;
    }

}

@media (max-width: 1205px) {

    .tabs {
        width: 25.5%;
    }
    .tab_container {
        width: 70%;
    }
    .inputGroup {
        width: calc(110% / 4);
    }
    #exampleFormControlTextarea1 {
        padding: 15px 15px 70px;
    }
    .trans-btn-text .title-fields-froup input {
        width: 49%;
        margin-right: 0;
    }
    .button-pref-012 input {
        width: 65%;
    }
}

@media (max-width: 995px) {
    .trans-btn-text .title-fields-froup input {
        width: 100%;
        margin-top: 10px;
    }

}

@media (max-width: 775px) {
    .tab_container {
        width: 92%;
    }
    .inputGroup {
        width: calc(86% / 2);
    }
    .banner-posit #single-select {
        width: 100%;
        margin-bottom: 15px;
    }
    .flip-btn {
        margin-bottom: 15px;
    }
    .button-pref-012 input {
        width: 100%;
    }
}