/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for detais on configuring this project to bundle and minify static web assets. */

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}



.form-group-Extra {
    width: calc(70% - 32.5px);
}
/******************************/
/*          GridView            */
/******************************/
/* Grid layout */
.grid-list {
    background-color: #fff;
    color: #5e5b64;
    font: 17px/1.3 "Open Sans", sans-serif;
    margin: 0 auto;
    max-width: 1024px;
    min-width: 300px;
    padding: 30px;
    text-align: center;
}

.grid-container {
    margin: 0 auto;
    padding: 15px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
}

.grid-media-item {
    position: relative;
    margin: 10px;
    width: 200px;
    height: 200px;
    background-color: rgba(0,0,0,0.1);
    padding: 5px;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 4px lightgrey;
}

.grid-media-item-ford {
    position: relative;
    /*margin: 10px;*/
    width: 270px;
    height: 152px;
    background-color: rgba(0,0,0,0.1);
    padding: 5px;
    display: flex;
    flex-direction: column;
    /*box-shadow: 4px 4px lightgrey;*/
}

.grid-media-item-title {
    flex: 0 1 auto;
    margin-bottom: 5px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-media-item-checkbox {
    flex: 0 1 auto;
    margin-bottom: 5px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-media-item-image {
    flex: 1;
    min-height: 0;
    margin-bottom: 5px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.ford-grid-media-item-image {
    flex: 1;
    min-height: 0;
    /* margin-bottom: 5px; */
    /* background-repeat: no-repeat; */
    /* background-size: contain; */
    background-position: center;
}


.grid-media-item-buttons {
    /*flex: 0;*/
    position: relative;
    width: calc(100%);
    display: inline-flex;
}

    .grid-media-item-buttons > .btn {
        width: calc(50%);
    }

.grid li:after {
    content: "";
    display: block;
    padding-bottom: 52%;
}

.grid li a {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid #fff;
    height: 99%;
    position: absolute;
    width: 98%;
}

    .grid li a:hover {
        border: 2px solid #000;
        box-shadow: inset 0 0 90px -10px rgba( 0, 0, 0, 1 );
        -moz-box-shadow: inset 0 0 90px -10px rgba( 0, 0, 0, 1 );
        -webkit-box-shadow: inset 0 0 90px -10px rgba( 0, 0, 0, 1 );
    }

.list {
    background-color: #ddedfb;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 100%;
}

    .list li {
        border-bottom: 1px solid #fff;
        overflow: hidden;
        padding: 20px;
        transition: background 0.2s linear;
    }

        .list li:hover {
            background-color: #fff;
        }

        .list li a {
            display: table;
            width: 100%;
        }


        .list li img {
            border: none;
            display: table-cell;
            height: 120px;
            vertical-align: middle;
            width: 120px;
        }

        .list li:hover p {
            color: #0096d4;
        }

        .list li p {
            color: #000;
            display: table-cell;
            font-weight: 700;
            padding: 0 0 0 15px;
            vertical-align: middle;
            width: 100%;
        }


.grid-btn {
    float: right;
    display: flex !important;
}

.grid-mediaName {
    display: inline-block;
    height: 15px;
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-border {
    border: 1.5px solid grey;
}
/******************************/
/*          Navbar            */
/******************************/
.navbar-right > li > a:hover {
    color: black !important;
}


.navbar-right > li > button:hover {
    color: black !important;
}

.container {
    float: left;
    width: 100%;
}

/* element-style Overwrite*/
element.style {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    height: 51px;
}
/* Navbar Overwrite*/
.navbar {
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid lightgrey;
    background-color: white;
    font-weight: bold;
    min-height: 62px;
}

/*.navbar-brand {
    margin-left: 20px;
}*/

.navbar-brand > img {
    max-height: 40px;
}

* font-family {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

a.btn:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}

a.btn {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

a.classname {
    background: url(../Images/image.gif) no-repeat top left;
    display: block;
    width: 150px;
    height: 150px;
    text-indent: -9999px; /* hides the link text */
}

element.style {
    border: 1px solid;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    height: calc(100% - 67px);
    width: 100%;
    display: flex;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
    padding: 3px;
    overflow: hidden;
}

/* styles for validation helpers */

.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}


ul.nav.nav-tabs {
    margin: 10px 0px;
}

    ul.nav.nav-tabs li:not(.active) a {
        background-color: #eeeeee;
        color: grey;
    }

    ul.nav.nav-tabs li.active a {
        border-top: 3px solid #16a765;
    }


.loaderbody {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    background-color: rgba(128,128,128,0.2);
    z-index: 2147483647;
}

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

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

    100% {
        transform: rotate(360deg);
    }
}

[v-cloak] {
    display: none;
}

.btn-layout {
    color: white;
    background-color: #8BC53F;
    border: 1px;
    /*width: 110px;*/
    text-transform: uppercase;
    border-radius: 4px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-weight: 600;
    min-width: 110px;
    text-align: center;
}

    .btn-layout:hover {
        background-color: #767676;
        color: white;
    }

    .btn-layout:focus {
        background-color: grey;
    }

.upper-navbar {
    margin-left: 15px;
}

    .upper-navbar > li:focus {
        color: black;
    }

.A1 {
    background: #ccc;
}

    /** on active **/

    .A1:focus {
        background: red;
    }

.logout-text {
    /*margin-top: -36px;*/
}

.btn-layout-main > a {
    margin-top: 12px;
}

.upper-navbar > li {
    text-decoration: none;
    padding: 17px;
}


/*.displayPlaylist > div {
    display: inline-flex;
    padding: 0 3px;
    
}*/

/*.upper-navbar > li > a:link, .upper-navbar > li > a:visited {
      background-color: #8BC53F;
      color: white;
      padding: 14px 25px;
      text-align: center;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      display: inline-block;
      border: 1px;
      border-radius: 4px;
      text-transform: uppercase;
      text-decoration: none;
  }

  .upper-navbar > li > a:hover, .upper-navbar > li > a:active {
      background-color: #767676;
      color: white;
  }*/


.btn-layout-main {
    color: white !important;
    background-color: #8BC53F;
    border: 1px;
    width: 110px;
    text-transform: uppercase;
    border-radius: 4px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    padding: 6px 0px !important;
}




    .btn-layout-main:hover, .btn-layout-main:active {
        background-color: #767676 !important;
        color: white;
        border-color: #8BC53F;
    }

    .btn-layout-main:focus {
        background-color: grey !important;
    }

.loginText {
    font-weight: 100;
}
/******************************/
/*     Media/ViewAll         */
/******************************/
#mediaPage {
    width: 100%;
    height: 100%;
    position: relative;
}



.details-box {
    height: 300px;
    width: 250px;
    border: solid 1px;
    margin-top: 120px;
    margin-left: 5px;
}

.btn-detail-area-buttons {
    flex: 0;
    position: relative;
    width: calc(77%);
}

    .btn-detail-area-buttons > .btn {
        width: calc(49%);
    }

.btn-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /*margin-left: 5px;*/
    position: relative;
    left: 0px;
    top: 0px;
}

.btn-top-Details {
    justify-content: space-between;
    width: 100%;
}

.btn-top > div {
    margin: 11px;
}

.btn-top .btn:hover:active {
    border-color: black;
    background-color: white;
}

.displayTimeDuration {
    display: flex;
}

.firstDiv {
    position: absolute;
    left: 42%;
    font-size: larger;
}

.secondDiv {
    position: absolute;
    left: 72%;
    font-size: larger;
}

.selectedmedia-box {
    width: 100%;
    height: 50%;
    /*margin-top: 30%;*/
    position: absolute;
    top: 35%;
}


.selectedmedia-box-title {
    text-align: center;
    font-size: 1.3em;
    color: black;
    text-underline-position: below;
    font-weight: bold;
}

.selectedMedia-box-detail {
    list-style-type: disc;
    margin-left: 3px;
}

.modal-title {
    display: inline;
}

.media-modal-title {
    /*text-align: center;
    font-weight: bold;
    font-size: 1.2em;*/
    display: inline;
}

.media-area {
    display: flex;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1em;
}

.departments {
    flex: 0 0 200px;
    margin-top: 130px;
    list-style-type: none;
    margin-left: -400px;
    background-color: floralwhite;
}

    .departments ul {
        list-style-type: disc;
    }

.media-display {
    flex: 150;
}

.browse-options {
    display: flex;
    align-items: center
}

    .browse-options > * {
        margin-left: 10px;
    }

    .browse-options .btn-grid:hover .btn-list:hover {
        background-color: #696969;
        color: white;
    }

.btn-child {
    background-color: #58595b;
    width: 135px;
    height: 30px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 5px;
    border-radius: 3px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-color: #767676;
}

    .btn-child:hover {
        color: black;
        background-color: white;
    }


.header-btn {
    color: white;
    background-color: #58595b;
    height: 30px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 5px;
    border-radius: 3px;
    font-weight: 600;
    border-color: #767676;
    min-width: 125px;
    text-align: center;
}

    .header-btn:hover {
        background-color: white;
        color: black;
    }

    .header-btn:focus {
        outline: none;
        color: white;
        background-color: #58595b;
    }

.btn-md {
    width: auto;
}

.progress-bar-color {
    background-color: #8BC53F !important;
}
/*.fixed_header {
    
    table-layout: fixed;
    border-collapse: collapse;
}

    .fixed_header tbody {
        display: block;
        width: 100%;
        overflow: auto;
    }

    .fixed_header thead tr {
        display: block;
        

    }

    .fixed_header thead {
        background: black;
        color: #fff;
    }

    .fixed_header th, .fixed_header td {
        padding: 5px;
        text-align: left;
    }*/



/*#mediatable > tbody > tr > td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}*/

.TitleWidth {
    max-width: 200px !important;
}

.disabledDiv {
    pointer-events: none;
    opacity: 0.4;
}

.displayFlex {
    display: flex;
    align-items: center;
}

.checkUrlBtn {
    height: 28px;
    width: 93px;
    margin-left: 5px;
}

#StartDate {
    padding: 6px 12px !important;
}

#EndDate {
    padding: 6px 12px !important;
}
/******************************/
/*     Playlist/Index         */
/******************************/
.search-media {
}

/*#table-Playlist > tbody > tr > td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}*/

#PlaylistMediaPage {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.table thead tr {
    text-align: left;
    font-weight: bold;
}

.header {
    display: flex;
    align-items: center;
}

.total-duration {
    position: absolute;
    left: 55%;
    font-size: larger;
}

/*.displayChannelname {
    position: absolute;
    left: 55%;
    font-size: larger;
}*/

.playlist-name {
    font-size: 1.5em;
    margin-right: 30px;
    padding-left: 10px;
}

.center-area {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.swal-wide {
    width: 832px !important;
}

/*Playlist table
    .table thead tr th {
        background-color: #009879;
        color: #ffffff;
        text-align: left;
        font-weight: bold;
        max-width: 120px;
        margin: 25px 0 25px 0;
        min-width: 120px;
    }

.table tbody tr td {
    border-bottom: 1px solid #dddddd;
    overflow: hidden;
    margin: 25px 0 25px 0;
    overflow: hidden;
    max-width: 120px;
    min-width: 120px;
    word-wrap: break-word !important;
}*/

.view-area {
    font-size: 1.1em;
    display: flex;
    height: 100%;
    overflow: auto;
}

.table-playlist {
    font-size: 0.9em;
    overflow: auto;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    height: calc(100% - 50px);
    flex: 1;
    padding: 0 10px;
    position: relative;
    top: 0;
    left: 0;
}


    .table-playlist thead tr th:hover {
        cursor: pointer;
        color: black;
    }

    .table-playlist tbody tr {
        height: 40px;
    }

.table-media {
    font-size: 0.9em;
    overflow: auto;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    height: calc(100% - 50px);
    flex: 1;
    padding: 0 10px;
}

    .table-media thead tr th:hover {
        cursor: pointer;
        color: black;
    }

.category-area {
    flex: 0 0 250px;
    list-style-type: none;
    background-color: #fff;
    max-width: 250px;
    position: relative;
    border-right: 1px solid #C8CCC3;
    overflow: auto;
}


.bullet_list {
    padding: 10px;
    position: relative;
}

    #bullet_list li {
        list-style-type: none;
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
    }

        #bullet_list li ul li {
            margin-left: -21px;
        }

.playlist-category ul {
    list-style-type: disc;
}




.media-category ul {
    list-style-type: disc;
}

.playlist-added-box {
    height: 500px;
    width: 700px;
    border: solid 1px;
    margin-top: -1px;
    margin-right: -779px;
    margin-left: 0px;
}

.playlist-added-box-title {
    text-align: center;
    font-size: 1.3em;
    color: black;
    /*background-color: yellow;*/
    text-underline-position: below;
}

/*Style for EditMedia*/

.abc div label {
    display: inline-block;
    width: auto;
    margin-right: 5px;
    text-align: left;
}

/*Style for AddMedia*/

.checkboxcss {
    margin: 0 0 0 10px;
}


.added-media-box {
    height: 300px;
    width: 250px;
    border: solid 1px;
    margin-top: 120px;
    margin-left: 5px;
}

.added-media-box-title {
    text-align: center;
    font-size: 1.3em;
    color: black;
    /*background-color: yellow;*/
    text-underline-position: below;
}

.Addmedia-search-div {
    background-color: floralwhite;
    border: solid;
}

/*style for Media*/

.media-category {
    flex: 0 0 200px;
    margin-top: 91px;
    list-style-type: none;
    margin-left: -400px;
    background-color: floralwhite;
}

    .media-category ul {
        list-style-type: disc;
    }

.pmedia-display {
    min-width: 0px;
    max-width: 222px;
}

.displayVariableName {
    background-color: lightgrey;
    color: black;
    margin-top: 5px;
    /*margin-left:100px;*/
}


    .displayVariableName > span {
        font-weight: 600;
    }

.remainigCount_parent {
    display: flex;
    flex-direction: column;
}


.remainigCount {
    font-weight: bold;
    font-size: 12px;
    margin-left: 15vh;
}

.resolutionDisplay {
    /*float: right;*/
    font-weight: bold;
    font-size: 12px;
    margin-left: 36.5vh;
}


.remainigCount > span {
    font-weight: 600;
}

#VariableErrorMessage {
    color: red;
    font-weight: 600;
}

.blinkingVariableMsg {
    /*animation: blinkingVariableText 5s infinite;
    font-weight: 600;
    background-color: lightgray;
    
    text-overflow: ellipsis;
    white-space: unset;
    overflow: hidden;
    width: auto;*/
}

    .blinkingVariableMsg:hover {
        overflow: visible;
    }

.blinkingVariablespan {
    margin-left: 5px;
}

.variableName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

    .variableName > span {
    }

@keyframes blinkingVariableText {
    0% {
        color: #000;
    }

    50% {
        color: darkred;
    }

    100% {
        color: #000;
    }
}

.bullet_list_variableModal {
    position: relative;
    list-style-type: none !important;
    margin: 10px;
}

    .bullet_list_variablemodal li div {
        margin-left: 10px;
    }

.bullet_list_variableModalEdit {
    /*position:relative;*/
    list-style-type: none !important;
    margin: 10px;
}

    .bullet_list_variablemodalEdit li div {
        margin-left: 10px;
    }


.chooseFileVarBtn {
    padding: 5px 0px;
    color: blue;
}
/*.form-group-Variable label {
    margin-right:5px;
    font-weight:bold;
}*/



.alertForVariableMsg {
    color: red;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}


.add-table-playlist {
    font-size: 0.9em;
    overflow: auto;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    height: calc(100% - 50px);
    flex: 1;
    padding: 0 10px;
}

.table-playlist thead tr th:hover {
    cursor: pointer;
    color: black;
}


.add-More-Media-mainLayout {
    position: relative;
}

    .add-More-Media-mainLayout > div {
        margin: 0px;
        padding: 5px 0px;
    }

.addSearch {
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

    .addSearch:focus {
        width: 100%;
    }



.btn-published {
    color: white;
    background-color: #8BC53F;
    border: 1px;
    border-radius: 4px;
    font-weight: 600;
    /*margin-left: inherit;
    display: flex;
    padding: 5px 5px 5px 5px;*/
}


    .btn-published:hover {
        color: black;
        border: 1px;
        border-radius: 4px;
        border-color: black;
        /*background-color: #8BC53F;*/
    }

    .btn-published > form {
        padding: 5px;
    }


.publishedPlaylistclass {
    color: white;
    background-color: darkgray;
    border: 1px;
    border-radius: 4px;
    /*margin-left: inherit;
    display: flex;
    padding: 5px 5px 5px 5px;*/
}



.TemplateTitleStyleEdit {
    /*background-color: #8BC53F;*/
    margin: 10px 50px !important;
}

.addTemplateTitleAdd {
}

.addTemplateTitleEdit {
}


@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border-top: 2px solid #07d;
    border-right: 2px solid transparent;
    animation: spinner .6s linear infinite;
}

.dropdown-playlist-LayoutID1 select {
    -webkit-appearance: none; /* for Firefox */
    -moz-appearance: none; /* for Chrome */
    text-indent: 1px;
    text-overflow: '';
    padding: 2px 30px 2px 6px;
}
/*.dropdown-playlist-LayoutID1 select::-ms-expand {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
        padding: 2px 30px 2px 2px;
        display: none; /* for IE
    }*/
/******************************/
/*     detail-area     */
/******************************/
.detail-area {
    flex: 0 0 250px;
    background-color: #f7f7f7;
    overflow-y: auto;
    /*padding: 14px 0px;*/
    font-size: 1.0em;
    padding: 10px 0px;
}

.detail-box-title {
    text-align: left;
    font-size: 16px;
    color: black;
    text-underline-position: below;
    font-weight: bold;
    position: relative;
}

/*.detail-box-detail {
    list-style-type: disc;
    padding: 8px 0;
}*/

.typeMedia-details {
    color: red;
}

.detail-area > div {
    margin: 0 10px;
}

.playlistNDuration {
    margin-left: 10px;
}
/******************************/
/*     SchedulePage   */
/******************************/
#schedulePage {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.layout-display {
    /*border: 1px solid grey;*/
    background-color: white;
    position: relative;
}

    .layout-display.landscape {
        width: 270px;
        height: 152px;
        /*display:table-cell;*/
    }

    .layout-display.portrait {
        width: 152px;
        height: 270px;
    }

.layout-zone-display {
    position: absolute;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

    .layout-zone-display:before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    .layout-zone-display.zoneone {
        background-color: #ffffff;
    }

    .layout-zone-display.zonetwo {
        background-color: #8BC53F;
    }

    .layout-zone-display.zonethree {
        /*background-color: deepskyblue;*/
        background-color: #767676;
    }

    .layout-zone-display.zonefour {
        background-color: orangered;
    }

#mediaZoneHover {
    border: 1px solid black;
    background-color: lightgray;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
}

.program-list {
    padding: 12px;
}

.program-list-schedule {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px;
    margin: 0 auto;
    padding: 17px;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
}

    .program-list-schedule > div {
        margin: 10px;
    }

.mainLayout {
    padding: 15px;
}

#layoutContainer {
    display: flex;
    height: 100%;
    width: 100%;
    padding: 2px 2px;
    justify-content: center;
}

    #layoutContainer > div {
        margin: 10px;
    }

        #layoutContainer > div > span {
            margin-left: 50%;
        }


.addProgramStyle {
    display: flex;
    flex-wrap: wrap;
    margin-top: 25px;
}

    .addProgramStyle > div {
        padding: 10px;
    }

.addProgramStyle-name {
    font-size: 1.4em;
}

.publishedChannelClass {
    color: white;
    background-color: darkgray;
    border: 1px;
    border-radius: 4px;
    /*margin-left: inherit;
    display: flex;
    padding: 5px 5px 5px 5px;*/
}

/******************************/
/*     AddProgramModal   */
/******************************/
.txtbox2-content-to-play {
    display: -webkit-inline-box;
}

.dropdown-selectPlaylist {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

    .dropdown-selectPlaylist > span {
        margin-left: 5px;
    }

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #4C4E49;
        margin-top: 5px;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }




.addedPlaylist1 {
    /*margin-left: 498px;
    margin-top: -32px;*/
    display: inline;
}

.addedPlaylistinZone {
    margin-left: 367px;
    margin-top: -29px;
    font-weight: bold;
}

.addedPlaylist {
    position: relative;
}

.displayPlaylist {
    display: flex;
    align-items: center;
}

    .displayPlaylist > div {
        /*color: red;*/
        display: inline-flex;
    }

        .displayPlaylist > div > button {
            margin-top: -4px;
        }

.child-displayPlaylist {
    padding: 0 5px;
}

.playlistName {
    position: absolute;
    top: 4px;
}

.addVariablebtn {
    position: absolute;
    left: 4%;
}

.displayProgram {
    padding: 5px;
    display: contents;
}

    .displayProgram > div {
        /*max-width: 300px;*/
        /*display:inline;*/
        padding: 5px;
    }

.displayProgram-default {
    display: contents;
}

    .displayProgram-default div {
    }

.selectedPlaylist_Program > div {
    padding: 5px;
}

.selectedTblRow {
    background-color: #8BC53F;
    font-weight: bold;
    color: white;
}

.add-More-Media-Search {
    background-color: #8BC53F;
    padding: 10px;
}

.addMoreMedia {
    padding: 15px;
}

.thtable {
    max-width: 150px;
    word-wrap: break-word;
}

/******************************/
/*     Login Page   */
/******************************/
.login-page {
    margin-left: 300px;
}
/******************************/
/*     Ad to Channel Model   */
/******************************/


.schedule-form {
    margin-left: 139px;
    padding: 5px;
}

.schedule-form-control {
    margin-left: 15px;
}




/******************************/
/*     Language select   */
/******************************/

.dropdown-menu1 {
    min-width: 88px;
}

.dropdown-menu-layout {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}



a.btn:hover {
    color: #fff;
    background-color: #00b3db;
    border-color: #285e8e;
}



.dropdown {
    position: relative;
    display: block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 0px;
    z-index: 1;
    top: 100%;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}


/******************************/
/*     Language select   */
/******************************/

.alreadyBuild-Media {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    /* height: 100%; */
    overflow: auto;
}


/******************************/
/*     Bullet in List   */
/******************************/


.show_hide {
    /*display: none;*/
    display: inline-block;
}

.plus:after {
    content: " +";
}

.minus:after {
    content: " -";
}

/******************************/
/*     Validation   */
/******************************/
/* .invalid class prevents CSS from automatically applying */
.invalid input:required:invalid {
    background: #BE4C54;
}

/* Mark valid inputs during .invalid state */
.invalid input:required:valid {
    background: #17D654;
}

.expand-list {
    margin-left: 0;
    margin-top: 0;
    font-weight: normal;
    cursor: pointer;
}

/******************************/
/*     Login Style   */
/******************************/
/*body {
   
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}*/

.wrapper {
    padding: 32px 0;
}

.form-signin {
    max-width: 380px;
    padding: 15px 35px 45px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
}

.form-signin-editAccount {
    padding: 15px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
}

.bg-img {
    background-image: url("")
}

.btn-all {
    background-color: #8bc53f;
    color: #fff;
    border-color: #ccc;
}

/******************************/
/*    Account   */
/******************************/

.wrapper-Account {
    padding: 20px;
    max-width: 717px;
    margin: auto;
}

.edit-wrapper {
    border: 1px solid rgba(0,0,0,0.1);
    padding: 12px;
}

.form-Account {
    /*content: "";*/
    display: flex;
    clear: both;
    /*width: 100%;*/
    padding: 11px 11px 11px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
}

.edit-Account {
    /*content: "";*/
    display: flex;
    /*clear: both;*/
    /*width: 100%;*/
    /*padding: 11px 11px 11px;
    margin: 0 auto;*/
    /*background-color: #fff;*/
}



.details-account {
    float: left;
    width: 55%;
    padding: 20px;
    /*margin: 10px 0;*/
}

.logo-account {
    /*float: left;
    padding: 23px 23px;*/
    float: right;
    padding: 20px;
    /*margin-left: 78px;*/
    width: 50%;
}

.logo-detail {
    /*float: right;
    padding: 23px 23px;
    margin-left: 125px;*/
    float: right;
    margin-left: 50px;
}

.logo-detail-edit {
    float: right;
    margin: 33px 0 0px 128px;
}

}

.btn-edit {
    margin-left: inherit;
    display: flex;
    padding: 5px 5px 5px 5px;
}

    .btn-edit > form {
        padding: 5px;
    }



.edit-horizontal > dt {
    padding: 0 5px;
}


.edit-horizontal > dd {
    padding: 6px 15px;
}

.preview-img {
    /*ight: 200px;
    width: 226px;
    align-items: center;
    border-color: none;
    margin: 30px 0px 16px 0;*/
    height: 250px;
    width: 250px;
    padding: 20px 0px;
    object-fit: contain;
}

.preview-img-edit {
    height: 200px;
    width: 200px;
    align-items: center;
    margin-left: 19px;
    border-color: none;
}

.btn-account-edit {
    float: right;
    margin: 20px;
}


.magic-class {
    display: flex;
}

/******************************/
/*    Group   */
/******************************/

.wrapper-group {
    padding: 20px;
    max-width: 320px;
    margin: auto;
}

.form-groups {
    content: "";
    display: table-cell;
    clear: both;
    padding: 11px 11px 11px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
}


.details-group {
    float: left;
    /*width: 50%;*/
    padding: 20px;
    margin: 10px 0;
}

.logo-group {
    /*float: left;
    padding: 23px 23px;*/
    float: right;
    padding: 28px 0;
    margin-left: 78px;
}

.center-text {
    text-align: center;
}

.icon-star {
    color: orange;
}

.display-Child-Name {
    color: red;
}


/******************************/
/*    Comman Buttons  */
/******************************/

.btn-edit {
    color: white;
    background-color: #8BC53F;
    border: 1px;
    border-radius: 4px;
    text-align: center;
}

    .btn-edit:hover {
        color: black;
        background-color: #97c53f;
    }

    .btn-edit:focus {
        outline: none;
    }

    .btn-edit > a {
        color: white;
        text-decoration: none;
    }

.btn-delete {
    color: white;
    background-color: #505050;
    border: 1px;
    border-radius: 4px;
    text-align: center;
}

    .btn-delete:hover {
        color: black;
        background-color: #696969;
    }

    .btn-delete:focus {
        color: white;
        outline: none;
    }

    .btn-delete > a {
        color: white;
        text-decoration: none;
    }


.btn-copy {
    color: white;
    background-color: dimgray;
    border: 1px;
    border-radius: 4px;
    text-align: center;
}

    .btn-copy:hover {
        color: black;
        background-color: dimgray;
    }

    .btn-copy:focus {
        outline: none;
    }

.btn-preview {
    color: white;
    background-color: #c4c4c4;
    border: 1px;
    border-radius: 4px;
    text-align: center;
}

    .btn-preview:hover {
        color: black;
        background-color: #c4c4c4;
    }

    .btn-preview:focus {
        outline: none;
    }

    .btn-preview > a {
        color: black;
        text-decoration: none;
    }

.btn-comman {
    background-color: #505050;
    color: white;
    padding: 5.5px;
    border: 1px;
    border-radius: 4px;
    display: inline-block;
}

    .btn-comman:hover {
        color: black;
        background-color: #505050;
    }

.btnfloat-Right {
    float: right;
}

/******************************/
/*    Comman Buttons  */
/******************************/

.btn-leftsidebar {
    position: absolute;
    bottom: 30px;
    background-color: #D8D8D8;
    padding: 0;
    width: 250px;
    display: flex;
    justify-content: center;
}

    .btn-leftsidebar > .btn {
        /*width: 70px;*/
    }

    .btn-leftsidebar > li {
        margin: 5px;
    }

.rightsidebar {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    background-color: #454743;
    padding: 8px 4px 4px 8px;
    border-radius: 10px 0 0 0;
    text-align: left;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--Text-Body-inverse, white);
}

/*.lbl-selectplaylists {
    margin-top: -4px;
    margin-left: -11px;
}*/

.navbar-layout a {
    align-content: center;
}

.btn-group-width {
    /*width: 102px;*/
}

.btn-group-overwrite {
    display: flex !important;
}

.hideDisplayUserBtn {
    padding: 0 15px;
}
/******************************/
/*    Account Page style  */
/******************************/
.tbl-Account {
    border: groove;
}

    .tbl-Account > th > tr > th {
        /*max-width: 30px;*/
    }

.centerAccount-Area {
    padding: 0 375px;
    align-items: center;
}

/******************************/
/*    Manage/Index  */
/******************************/

#templatePage {
    width: 100%;
    height: 100%;
    position: relative;
}


.info-account {
    margin: 2px -200px;
}

.user-centerArea {
    padding: 0 375px;
    align-items: center;
}



/*#fileList {
    margin-left:132px;
}*/

.temp-edit {
    margin-top: 6px;
}

.temp-edit-Assetsdisplay {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding: 0;
    margin-top: 6px;
}

.temp-add-Assetsdisplay {
    /*display: flex;
    flex-direction: column;
    list-style-type: none;
    margin-left: 225px;*/
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    list-style-type: none;
    padding: 0;
}

.filtereddropdown {
    margin: 5px 5px;
}

/*.detail-area-Template {
    flex: 0 0 250px;
    background-color: #e8e8e8;
    overflow: auto;
}*/
.draggbleVariable {
}

    .draggbleVariable > div:hover {
        cursor: pointer;
    }

#manageAGtbl > tbody > tr > td {
    /*max-width: 150px;*/
    /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
    word-wrap: break-word;
}

#manageUsertbl > tbody > tr > td {
    /*max-width: 150px;*/
    /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
    word-wrap: break-word;
}

.col1 {
    min-width: 150px !important;
    max-width: 150px !important;
    /*background-color:aquamarine;*/
}

.col2 {
    min-width: 130px !important;
    max-width: 130px !important;
    /*background-color:green;*/
}

.col3 {
    min-width: 130px !important;
    max-width: 130px !important;
    /*background-color: aquamarine;*/
}

.col4 {
    min-width: 110px !important;
    max-width: 110px !important;
    /*background-color: green;*/
}

.col5 {
    min-width: 110px !important;
    max-width: 110px !important;
    /*background-color: aquamarine;*/
}

.col6 {
    min-width: 110px !important;
    max-width: 110px !important;
    /*background-color: green;*/
}



/*#mediatable > tbody > tr > td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}*/
/******************************/
/*    Device/Index  */
/******************************/
#devicePage {
    width: 100%;
    height: 100%;
    position: relative;
}

.generatecode {
    display: inline-flex;
    margin: 0 50px;
}

.loader {
    border: solid 3px #eee;
    border-bottom-color: #6576ef;
    border-radius: 50%;
    content: "";
    height: 30px;
    left: 67%;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 30px;
    top: -63px;
}

.modal-addDeviceCode {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.categoryDropdown {
    /*text-shadow: 1px 1px 1px #827b7b;*/
    font-size: 1.3em;
    padding: 0 2.5px;
}

.LastHeartbeat {
    color: blue;
    font-weight: 600;
}

.Runtime {
    color: blue;
    font-weight: 600;
}

.checkHeartbeatclass {
    font-weight: 600;
    background-color: red;
    color: white;
}

.checkHeartbeatclass1 {
    background-color: blue;
    color: white;
    font-weight: 600;
}

.folderTreeClass {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

    .folderTreeClass :hover {
        cursor: pointer;
    }


.AGNames:hover {
    cursor: pointer;
}
/******************************/
/*    Manage  */
/******************************/
.wrapper-user {
    padding: 20px;
    max-width: 717px;
    margin: auto;
}

.table-users {
    height: 100%;
    width: 100%;
    margin: 70px 0px;
}

.tempdataMsg {
    color: #ac2424b0;
    font-size: large;
    padding: 0 15px;
}


.wrapper-Manage {
    width: 100%;
    height: 100%;
    padding: 20px;
    max-width: 717px;
    margin: auto;
}

.Wrapper-Manage-Main {
    position: absolute;
    height: 100%;
    width: calc(100% - 286px);
    left: 53%;
}

#AccPage {
    width: 100%;
    height: 100%;
    position: relative;
}

.account-Area {
    flex: 0 0 250px;
    list-style-type: none;
    background-color: #9e9e9e3d;
    font-size: 16px;
    padding: 8px;
}

.header-Account {
    display: flex;
    align-items: center;
    padding: 15px;
}

.tbl-Manage {
    border: none;
    font-size: 0.9em;
    overflow: auto;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 0 15px;
}



#manageDropdownCaret {
    margin-right: 5px;
}

#userDropdowncaret {
    margin-right: 8px;
    border-top: 5px solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

#userDropdownAvatar {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #262B2D;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-right > li {
    margin-top: 5px;
}

.dropdown-manage {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    text-align: left;
    min-width: 160px;
}

    .dropdown-manage > li > a {
        color: #58595b !important;
        padding: 14px 16px;
        display: block;
        text-decoration: none;
        white-space: nowrap;
    }

        .dropdown-manage > li > a:hover {
            background-color: #c4c4c4;
        }

.navbar-right {
    margin-left: 20px;
    margin-right: 20px;
}

.dropdown-help {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    text-align: left;
    min-width: 106px;
}

    .dropdown-help > a {
        color: #58595b !important;
        padding: 14px 16px;
        display: block;
        text-decoration: none;
        white-space: nowrap;
    }

        .dropdown-help > a:hover {
            background-color: #c4c4c4;
        }

.dropdown-account {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    text-align: left;
}

    .dropdown-account > a:hover {
        background-color: #c4c4c4;
    }

    .dropdown-account > a {
        color: #58595b !important;
        text-decoration: none;
        display: block;
        padding: 10px 20px;
        font-weight: bold;
        white-space: nowrap;
    }

    .dropdown-account > form > button {
        color: #58595b !important;
        text-decoration: none;
        display: block;
        padding: 10px 23px;
        font-weight: bold;
        margin: 0 !important;
        white-space: nowrap;
    }

        .dropdown-account > form > button:hover {
            background-color: #c4c4c4;
        }

.dropdown-language {
    right: auto;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    text-align: left;
    width: auto;
}

.navbar-default .btn-link {
    color: #4C4E49;
}

.dropdown-form > button {
    padding: 10px;
    display: block;
    text-decoration: none;
    width: 100%;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #4C4E49;
    margin: 0;
}

    .dropdown-form > button:hover {
        background-color: rgba(24, 54, 2, 0.08);
        text-decoration: none;
        color: #4C4E49;
    }

    .dropdown-form > button:active {
        background-color: rgba(24, 54, 2, 0.12);
        color: #1D2B1C;
    }

.dropdown-width {
    width: 300px !important;
    height: 400px !important;
}

.contact-page {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.dropdown:hover .dropdown-content {
    display: inline-block;
}

/******************************/
/*  xtra  */
/******************************/

/*.menu {
    margin: 0 30px 0 0;
}

    .menu a {
        clear: right;
        text-decoration: none;
        color: gray;
        margin: 0 10px;
        line-height: 70px;
    }

span {
    color: #54D17A;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
}

#toggle {
    display: none;
}


@media only screen and (max-width: 1000px) {
    label {
        display: block;
        cursor: pointer;
    }

    .menu {
        text-align: center;
        width: 100%;
        display: none;
    }

        .menu a {
            display: block;
            border-bottom: 1px solid #EAEAEB;
            margin: 0;
        }

    #toggle:checked + .menu {
        display: block;
    }
}*/
/*#toggle {
    display:none;
}

.menu {
    margin: 0 30px 0 0;
}

    .menu > ul > li > a  {
        clear: right;
        text-decoration: none;
      
    }

    .menu > ul > li > button{
        clear: right;
        text-decoration: none;
        
    }


.togglelabel {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
}

@media only screen and (max-width: 50%) {
    .togglelabel {
        display:block;
        cursor:pointer;
    }

    .menu {
        text-align: center;
        width: 100%;
        display: none;
    }

        .menu > ul > li > a {
            display: block;
            border-bottom: 1px solid #EAEAEB;
            margin: 0;
        }

        .menu > ul > li > button {
            display: block;
            border-bottom: 1px solid #EAEAEB;
            margin: 0;
        }
    #toggle:checked + .menu {
        display:block;
    }
}*/
/******************************/
/*  FAQ  */
/******************************/
.faqbody {
    text-align: center;
    padding: 150px;
}

h1 {
    font-size: 50px;
}

.faqbody {
    font: 20px Helvetica, sans-serif;
    color: #333;
}

article {
    display: block;
    text-align: left;
    width: 650px;
    margin: 0 auto;
}

.faqa {
    color: #dc8100;
    text-decoration: none;
}

    .faqa:hover {
        color: #333;
        text-decoration: none;
    }

#main-radio > lable {
    display: inline;
    position: relative;
    margin-left: 0.2em;
    _top: 0.2em;
}


#main-radio > div {
    display: inline-flex;
    margin: 8px 9px;
}

.errorClass {
    background: #444;
    color: #eee;
}

.btnVaribleParent {
    /*position: relative;*/
    display: flex;
}

.btnVarible {
    /*position: absolute;
    top: 8%;
    left: 50%;*/
    padding: 0 5px;
}

.btnVaribleDefault {
    position: absolute;
    top: 8%;
    left: 64%;
}

.btnPreview-Default {
    position: absolute;
    top: 8%;
    left: 86%;
}

.custom-file-input {
    display: inline-block !important;
    position: absolute;
    bottom: -4px;
    top: -3px;
}
/******************************/
/*    AddCategory/// */
/******************************/
.addCategoryIcon {
    border-radius: 0%;
    font-size: 22px;
    float: right;
    position: absolute;
    left: 80%;
}

.addChannelicon {
    color: orangered;
    transform: scale(0.7,0.7);
}

.blinking {
    animation: blinkingText 5s infinite;
    font-weight: 600;
    background-color: #8BC53F;
    padding: 2px 10px;
}

@keyframes blinkingText {
    0% {
        color: #000;
    }

    50% {
        color: white;
    }

    100% {
        color: #000;
    }
}

addedPlaylist1 {
    margin-left: 498px;
    margin-top: -32px;
}

.displayPlaylist1 {
    margin: 1px 0;
}

.tbl-user {
    border: none;
    font-size: 1.0em;
    overflow: auto;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 15px 15px;
}


.Paragraph_id {
    color: red;
    font-weight: 600;
}

.GroupIndex {
    padding: 50px;
}

.tbl-GroupIndex {
    padding: 20px 0;
}

.GroupIndex > tbl-GroupIndex {
    margin-bottom: 15px;
    padding: 0 0
}

.AccountIndex {
    padding: 50px;
}

.tbl-AccountIndex {
    padding: 10px 0;
}

.AccountIndex > tbl-AccountIndex {
    margin-bottom: 15px;
    padding: 0 0;
}



/******************************/
/*    ToolTip */
/******************************/
/* FOR TEST PURPOSES ONLY */
.tooltipQuestion {
    position: absolute;
    bottom: -5px;
    right: 2px;
    font-size: 15px;
}


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    opacity: 1;
    margin: -3px 8px;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 300px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: 150%;
        left: 50%;
        margin-left: -60px;
    }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
        }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

.redColor {
    color: orangered;
    font-size: 12px;
}

.greenColor {
    color: limegreen;
    font-size: 12px;
}


.table-device {
    font-size: 0.9em;
    overflow: auto;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    height: calc(100% - 50px);
    flex: 1;
    padding: 0 15px;
}


    .table-device thead tr th:hover {
        cursor: pointer;
        color: black;
    }

.variableAddClass {
    margin-left: 250px;
}

.editVariableBtn {
    margin-left: 225px;
    width: 120px;
}

.addVariableBtn {
    margin-left: 225px;
    width: 120px;
}

.editVariableText {
    width: 120px;
}

.displayVariableText {
    width: 120px;
    background-color: lightgray;
}

.charactorsLimitClass {
    width: 55px;
}
/******************************/
/*    Change class of btn-primary because sweetalert okay button takes class from bootstrap btn-primary */
/******************************/
.btn-primary {
    color: white !important;
    background-color: #8BC53F !important;
    border: 1px !important;
    border-radius: 4px !important;
}

/******************************/
/*  will make the Radio button green instead of origional one  */
/******************************/

in


input[type='radio']:after {
    width: 14px;
    height: 14px;
    border-radius: 14px;
    top: -1px;
    left: -1px;
    position: relative;
    /*background-color: white;*/
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1.5px solid white;
}

input[type='radio']:checked:after {
    width: 14px;
    height: 14px;
    border-radius: 14px;
    top: -1px;
    left: -1px;
    position: relative;
    background-color: #8BC53F;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 1.5px solid white;
}

.addMediaRadiobtn {
    align-items: center;
}

.modal-header {
    cursor: move;
}


#hide input[type=file] {
    display: none;
    margin: 10px;
}

    #hide input[type=file] + label {
        display: inline-block;
        margin: 20px;
        padding: 4px 32px;
        background-color: #FFFFFF;
        border: solid 1px #666F77;
        border-radius: 6px;
        color: #666F77;
    }

    #hide input[type=file]:active + label {
        background-image: none;
        background-color: #2D6C7A;
        color: #FFFFFF;
    }


.trigger {
    padding: 4px;
    background-color: #8BC53F;
    border: 1px;
    border-radius: 4px;
}


.labelInput span {
    margin: 3px 7px;
}


.labelInput input {
    display: none;
}


.media-label-input {
    margin: 7px 0px;
}



    .media-label-input input {
        display: none;
    }

#replaceFileName {
    font-weight: 100;
}

.spanStyleEditVariable {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 281px;
    overflow: hidden;
}

.ImageOrVideo {
    display: flex;
}

    .ImageOrVideo span {
        display: inline-block;
    }

    .ImageOrVideo label {
        display: inline-block;
    }


/******************************/
/*          GridView            */
/******************************/

.identity-class {
    display: flex;
    border: 2px solid;
}
/******************************/
/*       Identity/Layout            */
/******************************/
.layout-main {
    height: auto;
    padding: 18px;
    max-width: 717px;
    /*max-width: 320px;*/
    margin: auto;
    margin-top: 80px;
    margin-bottom: 80px;
    border: 1px solid rgba(0,0,0,0.1);
}

.layout-parent {
    display: flex;
    justify-content: space-evenly;
}

.layout-child1 {
    width: 25%;
}

.layout-child2 {
    padding: 0 35px;
}

    .layout-child2 > div > div {
        width: 100%
    }


.confirmationEmail {
    max-width: 380px;
    padding: 15px 35px 45px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.1);
}

    .confirmationEmail > p {
        font-size: 1.2em;
    }


.resetpassword-parent {
    height: auto;
    padding: 18px;
    max-width: 320px;
    margin: auto;
    margin-top: 80px;
    margin-bottom: 80px;
    border: 1px solid rgba(0,0,0,0.1);
}
/******************************/
/*          FAQ Page            */
/******************************/

.panel-info {
    border-color: transparent !important;
}

#Faq-page {
    padding: 20px;
}

.scrollable-page {
    overflow-y: auto;
    height: 100%;
    overflow-x: hidden;
}

#FAQTitleHeader {
    font-size: 2em;
    float: left;
}

#faqSearchBox {
    float: right;
}

#filterFAQ {
    font-weight: normal;
    text-align: right;
    clear: both;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
}

.top-faq-container {
    padding: 10px 0;
}

#bottom-faq-container {
    margin-top: 50px;
}

#faqBodyContainer {
    margin-top: 40px;
}

    #faqBodyContainer > .panel {
        margin-top: 15px !important;
        margin: auto;
    }

.panel-info > .panel-heading {
    color: #fff;
    background-color: #858683;
    border-color: #bbb;
}

.questionToShow {
    color: #fff;
    font-weight: bold;
}

    .questionToShow:link {
        color: #fff;
    }





.TitleFAQ {
    max-width: 500px !important;
}

.DescriptionFAQ {
    max-width: 500px !important;
    max-height: 300px !important;
}

/*.form-group, .form-control {
    display: inline-block;
    width: 100% !important;
}*/


.orderOfQuestion {
    float: right;
}

/*a {
    color: #96c856  !important;
    text-decoration: none !important;
}*/

#displayErrorMsg {
    color: red;
}

#mediaAddBtn {
    cursor: pointer;
    display: block;
    width: 90px;
    background-color: purple;
    height: 25px;
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 11px;
    line-height: 25px;
    text-align: center;
    -webkit-transition: 500ms all;
    -moz-transition: 500ms all;
    transition: 500ms all;
}

/******************************/
/*      404 Error Page           */
/******************************/


/** {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
}*/

/*#notfound {
    position: relative;
    height: 80vh;
}

    #notfound .notfound {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

.notfound {
    max-width: 710px;
    width: 100%;
    padding-left: 190px;
    line-height: 1.4;
}

.notfound .notfound-404 {
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        height: 150px;
    }

        .notfound .notfound-404 h1 {
            font-family: 'Passion One', cursive;
            color: #00b5c3;
            font-size: 150px;
            letter-spacing: 15.5px;
            margin: 0px;
            font-weight: 900;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

    .notfound h2 {
        font-family: 'Raleway', sans-serif;
        color: #292929;
        font-size: 28px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2.5px;
        margin-top: 0;
    }

    .notfound p {
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        font-weight: 400;
        margin-top: 0;
        margin-bottom: 15px;
        color: #333;
    }

    .notfound a {
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        text-decoration: none;
        text-transform: uppercase;
        background: #fff;
        display: inline-block;
        padding: 15px 30px;
        border-radius: 40px;
        color: #292929;
        font-weight: 700;
        -webkit-box-shadow: 0px 4px 15px -5px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 4px 15px -5px rgba(0, 0, 0, 0.3);
        -webkit-transition: 0.2s all;
        transition: 0.2s all;
    }

        .notfound a:hover {
            color: #fff;
            background-color: #00b5c3;
        }

@media only screen and (max-width: 480px) {
    .notfound {
        text-align: center;
    }

        .notfound .notfound-404 {
            position: relative;
            width: 100%;
            margin-bottom: 15px;
        }

    .notfound {
        padding-left: 15px;
        padding-right: 15px;
    }
}*/


* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
}

#notfound {
    position: relative;
    height: 100vh;
}

    #notfound .notfound {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

.notfound {
    max-width: 460px;
    width: 100%;
    text-align: center;
    line-height: 1.4;
}

    .notfound .notfound-404 {
        position: relative;
        width: 180px;
        height: 180px;
        margin: 0px auto 50px;
    }

        .notfound .notfound-404 > div:first-child {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: #ffa200;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            border: 5px dashed #000;
            border-radius: 5px;
        }

            .notfound .notfound-404 > div:first-child:before {
                content: '';
                position: absolute;
                left: -5px;
                right: -5px;
                bottom: -5px;
                top: -5px;
                -webkit-box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1) inset;
                box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1) inset;
                border-radius: 5px;
            }

        .notfound .notfound-404 h1 {
            font-family: 'Cabin', sans-serif;
            color: #000;
            font-weight: 700;
            margin: 0;
            font-size: 90px;
            position: absolute;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            left: 50%;
            text-align: center;
            height: 40px;
            line-height: 40px;
        }

    .notfound h2 {
        font-family: 'Cabin', sans-serif;
        font-size: 33px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 7px;
    }

    .notfound p {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        color: #000;
        font-weight: 400;
    }

    .notfound a {
        font-family: 'Cabin', sans-serif;
        display: inline-block;
        padding: 10px 25px;
        background-color: #8f8f8f;
        border: none;
        border-radius: 40px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        -webkit-transition: 0.2s all;
        transition: 0.2s all;
    }

        .notfound a:hover {
            background-color: #2c2c2c;
        }

/******************************/
/*      Radio Button            */
/******************************/

.switch-field {
    display: flex;
    /*margin-bottom: 36px;*/
    overflow: hidden;
}

    .switch-field input {
        position: absolute !important;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        width: 1px;
        border: 0;
        overflow: hidden;
    }

    .switch-field label {
        background-color: #e4e4e4;
        color: rgba(0, 0, 0, 0.6);
        font-size: 14px;
        line-height: 1;
        text-align: center;
        padding: 8px 16px;
        margin-right: -1px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
        transition: all 0.1s ease-in-out;
    }

        .switch-field label:hover {
            cursor: pointer;
        }

    .switch-field input:checked + label {
        background-color: #8BC53F;
        box-shadow: none;
    }

    .switch-field label:first-of-type {
        border-radius: 4px 0 0 4px;
    }

    .switch-field label:last-of-type {
        border-radius: 0 4px 4px 0;
    }



.form-group-selectAll {
}


.form-control-ovrt {
    display: initial;
}

.icon-list {
    margin-left: 4px;
}

/******************************/
/*      Hamburger Menu
*/
/******************************/


/*.loginPartial_label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
}

#loginPartial_toggle {
    display: none;
}

.loginPartial_menu > ul > li {
    display: inline-block;
}

.loginPartial_menu > ul > li > button {
    align-items: center;

}

    .loginPartial_menu > ul > li > button {
        
    }

@media only screen and (max-width: 1000px) {
    .loginPartial_label {
        display: block;
        cursor: pointer;
    }

    .loginPartial_menu {
        text-align: center;
        width: 100%;
        display: none;
    }

        .loginPartial_menu > ul > li  {
            display: block;
            border-bottom: 1px solid #EAEAEB;
            width: 150px;
        }

    #loginPartial_toggle:checked + .loginPartial_menu {
        display: block;
    }
}*/

/******************************/
/*     Dashboad   */
/******************************/
#dashboardPage {
    width: 100%;
    height: 100%;
    position: relative;
}

/*.addDashboard-Container {*/
/*display: flex;*/
/*display: flex;
}*/


.addDashboard {
    display: flex;
}

    .addDashboard > div {
        margin-right: 10px;
    }

.groupDashCategory > span {
    margin-left: 10px;
}

.accountDashCategory > span {
    margin-left: 10px;
}


.groupDashCategory > ul {
    margin: 5px 20px;
}

.accountDashCategory > ul {
    margin: 5px 20px;
}

.groupDashCategory > ul > li:hover {
    cursor: pointer;
    text-decoration: underline;
}

.accountDashCategory > ul > li:hover {
    cursor: pointer;
    text-decoration: underline;
}

/*.accountDashCategory > ul > li:active {
  text-decoration:double;
    text-decoration: underline;
}

.accountDashCategory > ul > li:active {
    text-decoration: solid;
    text-decoration: underline;
}*/

.dashTemplate-container {
    /*margin-top: 10px;*/
}

.dashTemplate-area {
    padding: 10px;
}

.dashTable-thead {
    background-color: grey;
    color: white;
}

.inputDisabled {
    /* opacity:0.6;*/
    cursor: not-allowed;
    pointer-events: none;
    background-color: lightgray;
}

.divDisabled {
    pointer-events: none;
    opacity: 0.4;
}

.dashboardTitle {
    font-size: 18px;
    font-weight: bold;
}

.dashboard-center-area {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.fullScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.addInPlaylist-Container {
    display: flex;
    align-items: center;
}

    .addInPlaylist-Container > label {
        margin-left: 10px;
    }

.playImage {
    height: 138px;
    width: 190px;
    opacity: 0.7;
}

.register-user input, .register-user select, .edit-user input, .edit-user select {
    max-width: none;
}

.register-user a {
    font-size: small;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: #93c44a;
}


.grid-media-item-image-container {
    position: relative;
    width: 100%;
    height: 150px;
    background-color: #f8f9fa;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
}

.grid-media-item-image {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

.grid-media-item-image-container .playImage {
    position: absolute;
    width: 50% !important; /* Make it bigger */
    height: 50% !important; /* Make it bigger */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    opacity: 0.8;
    color: white
}



.grid-media-item-image[src*="url.png"],
.grid-media-item-image[src*="TemplateIcon.png"],
.grid-media-item-image[src*="no-image.png"],
.grid-media-item-image[src*="no-image-thumb.jpg"] {
    width: 80px;
    height: 80px;
    object-fit: contain;
}


.media-thumbnail-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.body-content > div:last-of-type {
    flex: 1;
    max-height: 100%;
    overflow: auto;
}

/******************************/
/*     Sidebar Nav   */
/******************************/

#sidebar-nav {
    position: relative;
    width: 80px;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-family: "Roboto", sans-serif;
    padding: 16px 0 32px 0;
    background-color: rgba(242, 242, 242, 1);
}

.sidebar-nav-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

a.sidebar-nav-item {
    max-width: 72px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    font-weight: 600;
    font-size: 11px;
    color: #4C4E49;
}

.sidebar-nav-item-icon {
    width: 56px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
}

    .sidebar-nav-item-icon svg {
        fill: #4C4E49;
    }

a.sidebar-nav-item.disabled {
    color: rgba(27, 28, 27, 0.45);
    pointer-events: none;
    cursor: default;
}
    a.sidebar-nav-item.disabled .sidebar-nav-item-icon svg {
        fill: rgba(27, 28, 27, 0.45);
    }

a.sidebar-nav-item.active .sidebar-nav-item-icon {
    background-color: rgba(24, 54, 2, 0.12);
}


.sidebar-nav-item:hover:not(.disabled):not(.active) .sidebar-nav-item-icon {
    background-color: rgba(24, 54, 2, 0.08);
}

.sidebar-nav-item img {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/******************************/
/*     Menu Changes   */
/******************************/

.menu-list {
    padding: 10px;
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #666666;
    font-size: 14px;
}

.menu-divider {
    border-bottom: 1px solid #C8CCC3;
    margin: 4px 0 4px 16px;
}

.menu-divider:last-child {
    display: none;
}

.menu-item-container {
    position: relative;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 16px;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
}

.menu-item.disabled {
    color: rgba(27, 28, 27, 0.45);
}

    .menu-item.active {
        background-color: rgba(24, 54, 2, 0.12);
        color: #1D2B1C;
    }

    .menu-item:hover:not(.disabled):not(.active) {
        background-color: rgba(24, 54, 2, 0.08);
    }

.menu-item-btn {
    width: 30px;
    height: 30px;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    position: absolute;
    right: 7px;
    top: 5px;
    cursor: pointer;
}

.menu-item-btn.visible {
    display: flex;
}

.menu-item-container:hover .menu-item-btn {
    display: flex;
}

    .menu-item-btn:hover {
        display: flex;
        background-color: rgba(24, 54, 2, 0.08);
    }

    .menu-item-btn:active {
        background-color: rgba(24, 54, 2, 0.12);
    }

.menu-item-label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 20px;
    max-width: 100%;
}

.menu-item-container:hover .menu-item-label {
    max-width: calc(100% - 30px);
}

.menu-item-label > div {
    padding-top: 2px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sub-item {
    margin-left: 16px;
}

.add-category {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/******************************/
/*     Table Changes   */
/******************************/
.search-box {
    position: relative;
}

.search-box .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    pointer-events: none; 
}

.search-box input {
    padding-left: 34px; 
}

.search-textbox {
    border-radius: 25px;
    color: #4C4E49;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    height: 52px;
    border-radius: 100px;
    border: 1px solid #C8CCC3;
    background: #FFF;
    display: flex;
    width: 354px;
    height: 52px;
    min-width: 160px;
}

   
.search-textbox::placeholder {
    color: #4C4E49;
    opacity: 1;
}

.search-textbox::-webkit-input-placeholder {
    color: #4C4E49;
}

.search-textbox:-ms-input-placeholder {
    color: #4C4E49;
}

.search-textbox::-ms-input-placeholder {
    color: #4C4E49;
}

.glyphicon-search.search-icon {
    color: #4C4E49;
}

.media-link {
    color: #1D2B1C;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    display: flex;
    min-width: 65px;
    padding: 10px 16px 10px 12px;
    justify-content: center;
    border: none;
    border-radius: 100px;
}

.media-link.text {
    background: rgba(24, 54, 2, 0.00);
}

.media-link.disabled {
    background: rgba(24, 54, 2, 0.00);
    color: rgba(27, 28, 27, 0.45);
}

.media-link.outline {
    border: 1px solid var(--Border-On-primary, #1D2B1C);
    background: rgba(24, 54, 2, 0.00);
    outline: none !important;
}

.media-link.filled {
    border-radius: 100px;
    background: var(--Surface-Background-surface-dark-020, #262B2D);
    display: flex;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: var(--Text-Body-inverse, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.media-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.media-link:not(.disabled):not(:disabled):hover {
    background: rgba(24, 54, 2, 0.08);
}

.media-link:not(.disabled):not(:disabled):active {
    background: rgba(24, 54, 2, 0.18) !important;
}

.media-link.outline:not(.disabled):not(:disabled):hover {
    background: var(--Surface-Background-surface-dark-020, #262B2D) !important;
    box-shadow: 0 1px 2px 0 rgba(27, 28, 27, 0.30), 0 1px 3px 1px rgba(27, 28, 27, 0.15);
    color: var(--Text-Body-inverse, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
}

.media-link.filled:not(.disabled):not(:disabled):hover {
    background: var(--Surface-Background-surface-dark-020, #262B2D) !important;
    box-shadow: 0 1px 2px 0 rgba(27, 28, 27, 0.30), 0 1px 3px 1px rgba(27, 28, 27, 0.15);
    color: var(--Text-Body-inverse, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
}

.media-link.outline:not(.disabled):not(:disabled):active {
    background: var(--Surface-Background-surface-dark-020, #262B2D) !important;
    color: var(--Text-Body-inverse, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
}

.media-link.filled:not(.disabled):not(:disabled):active {
    background: var(--Surface-Background-surface-dark-020, #262B2D) !important;
    color: var(--Text-Body-inverse, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
}

.media-link:disabled {
    display: flex;
    padding: 10px 16px 10px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    background: var(--State-layer-Primary-disabled, rgba(24, 54, 2, 0.00)) !important;
    color: var(--Text-Body-disabled, rgba(27, 28, 27, 0.45));
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
    letter-spacing: 0.1px;
}

.icon-container {
    height: 32px !important;
    width: 32px !important;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
}

.icon-inner-container {
    height: 28px;
    width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.icon-inner-container:hover {
    border-radius: 100px;
    background: rgba(24, 54, 2, 0.08);
}

.icon-inner-container:active, .icon-inner-container.is-active {
    border-radius: 100px;
    background: rgba(24, 54, 2, 0.18);
}

.layout-option {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-button-container {
    display: flex;
    gap: 32px
}

.checkbox-container {
    display: flex;
    width: 58px;
    height: 36px;
    padding: 6px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.checkbox-container input[type="checkbox"] {
    height: 18px;
    width: 18px;
}

.checkbox-container label {
    margin: 0px;
}


.custom-table thead tr {
    border-bottom: 1px solid #C8CCC3;
    background: #FFF;
}

.custom-table thead tr th {
    height: 36px;
    padding: 6px 8px;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

.custom-table tr td {
    min-height: 50px;
    padding: 6px 8px;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    vertical-align: top !important;
    border-bottom: 1px solid var(--Border-border-010a, #C8CCC3);
    padding: 0px !important;
}

.custom-table thead tr th .header {
    color: #1D2B1C;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.25px;
    height: 36px;
}

.custom-table .header a:first-of-type {
    margin-left: 5px;
}

.custom-table .table-action {
    display: flex;
    gap: 8px;
    height: 28px;
}

.custom-table tbody {
    border-bottom: 1px solid var(--Border-border-010a, #C8CCC3);
    background: var(--Surface-Background-surface-light-000, #FFF);
}

.checkbox-container input[type="checkbox"] {
    accent-color: #1B1C1B;
}

.row-selected td, .row-active td {
    background-color: #F7F7F7;
}

.title-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.item-box-detail {
    display: flex;
    width: auto;
    padding: 8px 8px 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.detail-box-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    display: flex;
}

.header-container {
    display: flex;
    min-width: 65px;
    align-items: flex-start;
    gap: 8px;
    display: flex;
    padding: 10px 16px 10px 0px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

.cms-card {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Surface-Background-surface-light-000, #FFF);
}

.card-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.cart-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    color: var(--Text-Body-primary, #4C4E49);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.5px;
    width: 100%;
    word-break: break-word;
}

.card-desc {
    color: var(--Text-Body-primary, #4C4E49);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    width: 100%;
    word-break: break-word;
}


.custom-nav-item-container {
    display: flex;
    width: 220px;
    min-width: 112px;
    max-width: 280px;
    padding: 8px 0;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 4px;
    background: var(--Surface-Background-surface-light-010, #F7F7F7);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.custom-nav-item {
    display: flex;
    height: 48px;
    align-items: center;
    flex: 1 0 0;
    cursor: pointer;
    width: 100%;
}

.playlist-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.playlist-action {
    display: flex;
    align-items: center;
    gap: 16px;
}

.displayBlock {
    display: block
}

.playlist-label {
    color: var(--Text-Body-primary, #4C4E49);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
    letter-spacing: 0.1px;
}

.checkboxitem {
    width: 100px
}

.actionitem {
    width: 140px
}

.cursorPointer {
    cursor: pointer
}

/******************************/
/*     Top Nav Changes   */
/******************************/

.navbar-menu-container {
    display: flex;
    padding-right: 20px;
    height: 100%;
    justify-content: flex-end;
    gap: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #4C4E49;
}

.navbar-menu-btn {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .navbar-menu-btn:hover {
        background-color: rgba(24, 54, 2, 0.08);
    }

    .navbar-menu-btn:active, .dropdown.open > .navbar-menu-btn {
        background-color: rgba(24, 54, 2, 0.18)
    }

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.dropdown-menu.left {
    left: auto;
    right: 0;
}

    .dropdown-menu.left .dropdown-menu.left {
        right: 100%;
        left: auto;
    }

.navbar-default .btn-link:hover, .navbar-default .btn-link:focus {
    color: #4C4E49;
}

.dropdown-menu > li > a {
    padding: 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #4C4E49;
}

    .dropdown-menu > li > a:hover {
        background-color: rgba(24, 54, 2, 0.08);
        color: #4C4E49;
    }

    .dropdown-menu > li > a:active {
        background-color: rgba(24, 54, 2, 0.12);
        color: #1D2B1C;
    }


.checkbox-inner-container {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    width: 140px;
}


.ml-30 {
    margin-left: 30px;
}

.expand-icon {
    cursor: pointer;
    margin-left: 8px;
}

.collapsible-row {
    background-color: #f9f9f9;
}

.zone-child {
    padding-left: 30px;
    font-style: italic;
}

.border-none {
    border-bottom: none !important;
    border-top: none !important;
}

.placeholder-row {
    border-bottom: 1px solid var(--Border-border-010a, #C8CCC3);
    background: var(--Surface-Background-surface-dark-010, #454743);
    color: var(--Text-Body-inverse, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.card-header-icon {
    display: flex;
    padding: 10px 16px 10px 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: #000;
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.card-header-collapse {
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: center;
}

.collapse-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.checkboxitem-group {
    width: 50px;
}

.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.zone-details {
    margin-top: 6px;
    font-size: 13px;
}

.zone-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 2px 0;
    padding: 11px 8px;
    color: var(--Text-Body-on-primary, #1D2B1C);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    border-top: 1px solid var(--Border-border-010a, #C8CCC3);
}


.table-cell-container {
    min-height: 58px;
    padding: 11px 8px;
    display: flex;
    align-items: center;
}

.table-cell-container.center-text {
    text-align: center;
    justify-content: center;
}

#mediatable th.checkboxitem {
    padding-left: 8px;
}

.ellipsis-text {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delete-title {
    color: var(--Text-Body-on-primary, #1D2B1C);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
}

.list-group-item-delete {
    color: var(--Text-Body-on-primary, #1D2B1C);
    font-family: Roboto;
    font-size: 14px;
    border: none;
    font-weight: 400;
}

.list-group-delete {
    max-height: 300px;
    overflow: auto;
}

.revert-icon {
    fill: #4C4E49;
}

.revert-icon.disabled {
    fill: var(--Icon-disabled, rgba(27, 28, 27, 0.45));
}

.actionitem .table-cell-container . icon-container {
    width: 50px;
    height: 50px;
}

.edit-button-container {
display: flex;
align-items: center;
}

.playlist-publish-message-container {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: var(--Surface-Background-surface-dark-010, #454743);
    margin-right: 11px;
}

.playlist-publish-message {
    display: flex;
    align-items: center;
}

.publish-message {
    display: flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: var(--Text-Body-inverse, #FFF);
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; 
    letter-spacing: 0.1px;
}

.media-link.outline:disabled {
    border: 1px solid rgba(27, 28, 27, 0.4);
}

.media-link.filled:disabled {
    color: var(--Text-Body-disabled, rgba(27, 28, 27, 0.45));
    text-align: center;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    background: rgba(27, 28, 27, 0.08) !important;
}

#mediatable input[type="checkbox"] {
    margin: 0px;
}

.table-cell-container.indented, .zone-row.indented {
    padding-left: 40px;
}


/*************************************************************/
/*   Reusable page and form building blocks.                 */
/*                                                            */
/*   Added for the settings redesign (story 6560) but kept    */
/*   page-agnostic on purpose: any CMS page can reuse these.  */
/*   The app loads Bootstrap 3.4.1, so every class name here  */
/*   was checked against Bootstrap 3 and 4 to avoid clashes.  */
/*************************************************************/

/******************************/
/*   Page shell               */
/******************************/

/* Fills the content area to the right of the fixed 80px sidebar.
   .body-content > div:last-of-type already applies flex: 1. */
.page-wrapper {
    width: 100%;
    font-family: 'Roboto', sans-serif;
}

/* Toolbar across the top of a page: back arrow + heading on the left,
   action buttons on the right. Full width with a bottom rule.
   (Named "toolbar" because Bootstrap 3 already defines .page-header.) */
.page-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    border-bottom: 1px solid #c8ccc3;
}

.page-toolbar-title {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* On the heading element itself, so any heading level can be used. */
.page-toolbar-heading {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0;
    color: #4c4e49;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 20px icon centred in a 32px circular hit area. */
.back-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 100px;
    color: #4c4e49;
    font-size: 20px;
    line-height: 1;
}

.back-arrow:hover, .back-arrow:focus {
    background-color: rgba(0, 0, 0, 0.04);
    color: #4c4e49;
    text-decoration: none;
}

/******************************/
/*   Buttons                  */
/******************************/

/* Pill button. Standalone: does not require Bootstrap's .btn. */
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 97px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.btn-pill-primary {
    background-color: #151718;
    color: #ecedee;
}

/* The five states come from Figma's Button V3: 159:2962 hover, 159:2965 focus, 159:2968
   pressed, 159:2971 disabled, 159:2974 loading.

   The design draws each one as a translucent "state layer" over a fixed surface. There are no
   custom properties in this file to hold one, and .btn-pill is worn by <a> (_PageToolbar) and
   <label> (the file-upload pill) as well as <button>, so rather than hang a pseudo-element on
   all three, each state is written as the colour the layer composites to. The arithmetic, for
   whoever changes the base colour later:

       #151718 + rgba(255, 255, 255, 0.12)  ->  #313334   hover
       #151718 + rgba(255, 255, 255, 0.25)  ->  #505152   pressed

   Only the primary variant needs that arithmetic: the other two sit on a transparent surface, so
   their state layers are used as the background colour directly.

   All three variants order their rules :hover -> :focus-visible -> :active, and the order is
   load-bearing. The secondary and tertiary focus states carry a wash of their own, so :active has
   to come last or a held-down focused button would show the focus wash instead of the pressed
   one. The primary's focus state sets no background, so it does not care -- it follows the same
   order anyway, to keep one shape across the block.

   :focus-visible and not :focus throughout, for the reason spelled out above .segmented-option's
   ring: a button keeps focus after a mouse click, and plain :focus left a pill looking hovered
   long after the pointer had gone.

   Nothing below moves the box. .file-field's min-height is measured off .btn-pill rendering at
   42px -- see the note above it -- so a state that grew the button by even a pixel would put
   the dialog jitter back. .btn-pill-loading is the one exception, and nothing wears it. */
.btn-pill-primary:hover {
    background-color: #313334;
    color: #ecedee;
    text-decoration: none;
}

/* The design puts the focus ring inside the button rather than around it -- 159:2965 measures
   97 x 40 like every other state, with a 2px #ededed ring inset 2px. Two inset shadows draw it,
   the earlier painting over the later: 1px of #151718, plus the 1px transparent border that the
   background already shows through, make the outer 2px dark, and the rest of the 3px shadow is
   the light ring. Nothing lands outside the border box, so focusing a button never nudges the
   footer it sits in. It sets no background, so :hover and :active still read through the ring. */
.btn-pill-primary:focus-visible {
    box-shadow: inset 0 0 0 1px #151718, inset 0 0 0 3px #ededed;
    outline: none;
}

/* :active is CSS's "pressed". */
.btn-pill-primary:active {
    background-color: #505152;
    color: #ecedee;
    text-decoration: none;
}

.btn-pill-secondary {
    background-color: transparent;
    color: #11181c;
    border-color: #6f6f6f;
}

.btn-pill-secondary:hover {
    background-color: rgba(2, 28, 55, 0.08);
    color: #11181c;
    text-decoration: none;
}

/* This variant's ring is a second hairline 3px inside the border, over the hover wash (159:2991
   -- 97 x 40 outer, with Content inset at 3,3). The primary's stacked inset shadows cannot draw
   it: they need an opaque fill behind the gap, and this pill is transparent. A negatively offset
   outline can -- it follows the border radius, needs no positioning, and unlike a pseudo-element
   is immune to the overflow: hidden on .file-upload-button, which wears this variant on a
   <label>. -5px puts the outline's inner edge 5px in and paints 1px back out towards the edge,
   landing the ring at 4 to 5px from the border box: 1px border, 3px gap, 1px ring.

   The design's ring is 1.25px at -5.25px. Written as whole pixels because that is what the
   engine resolves them to -- computed style comes back "solid 1px" / "-5px" either way -- and a
   declaration that rounds away is a declaration that misleads the next reader. */
.btn-pill-secondary:focus-visible {
    background-color: rgba(2, 28, 55, 0.08);
    outline: 1px solid #6f6f6f;
    outline-offset: -5px;
}

.btn-pill-secondary:active {
    background-color: rgba(1, 33, 57, 0.13);
    color: #11181c;
    text-decoration: none;
}

/* The third Button V3 variant, "Text" in the design: no surface, no border, underlined label.
   States are 159:3014 hover, 159:3017 focus, 159:3020 pressed, 159:3023 disabled, 159:3026
   loading. It was .btn-link-action, which named the look rather than the role and left it filed
   under Modal rather than here beside its two siblings.

   min-width: auto is the one deliberate departure from the design, which floors all three
   variants at 97px. This one sizes to its label instead. */
.btn-pill-tertiary {
    min-width: auto;
    background-color: transparent;
    color: #11181c;
    text-decoration: underline;
}

.btn-pill-tertiary:hover {
    background-color: rgba(2, 28, 55, 0.08);
    color: #11181c;
    text-decoration: underline;
}

/* A single hairline on the button's own box here (159:3017 -- Content at 0,0, same 97 x 40), and
   .btn-pill already carries a 1px transparent border, so colouring it in is the whole focus
   state. No outline, nothing added to the box. */
.btn-pill-tertiary:focus-visible {
    background-color: rgba(2, 28, 55, 0.08);
    border-color: #6f6f6f;
    outline: none;
}

.btn-pill-tertiary:active {
    background-color: rgba(1, 33, 57, 0.13);
    color: #11181c;
    text-decoration: underline;
}

/* Without this a disabled pill is indistinguishable from an enabled one, so a guard like
   Save-while-the-file-is-still-being-read reads as an unresponsive button. */
.btn-pill:disabled,
.btn-pill[disabled] {
    opacity: 0.38;
    cursor: default;
}

.btn-pill:disabled:hover,
.btn-pill[disabled]:hover {
    background-color: transparent;
}

/* None of the three variants is faded; each is emptied its own way, and all of them have to sit
   after the state rules above -- a variant's :disabled ties with its :hover on specificity and
   wins on source order alone. The opacity above is now only a safety net for a pill wearing no
   variant class at all.

   A disabled <button> still matches :hover and :active, so each variant's pointer states have to
   be neutralised by hand as well. None of this reaches the <a> in _PageToolbar or the <label> on
   the file-upload pill, which never match :disabled -- neither is ever disabled today. */

/* Primary loses the dark surface entirely (159:2971), leaving a 5% black wash. */
.btn-pill-primary:disabled,
.btn-pill-primary[disabled] {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
    border-color: transparent;
    color: #858585;
    box-shadow: none;
}

.btn-pill-primary:disabled:hover,
.btn-pill-primary[disabled]:hover,
.btn-pill-primary:disabled:active,
.btn-pill-primary[disabled]:active {
    background-color: rgba(0, 0, 0, 0.05);
    color: #858585;
}

/* Secondary keeps its outline but greys it down (159:2997). */
.btn-pill-secondary:disabled,
.btn-pill-secondary[disabled] {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.05);
    border-color: #c7c7c7;
    color: #858585;
    outline: none;
}

.btn-pill-secondary:disabled:hover,
.btn-pill-secondary[disabled]:hover,
.btn-pill-secondary:disabled:active,
.btn-pill-secondary[disabled]:active {
    background-color: rgba(0, 0, 0, 0.05);
    color: #858585;
}

/* Tertiary greys the label and nothing else -- no wash, no border (159:3023). */
.btn-pill-tertiary:disabled,
.btn-pill-tertiary[disabled] {
    opacity: 1;
    background-color: transparent;
    border-color: transparent;
    color: #858585;
    outline: none;
}

.btn-pill-tertiary:disabled:hover,
.btn-pill-tertiary[disabled]:hover,
.btn-pill-tertiary:disabled:active,
.btn-pill-tertiary[disabled]:active {
    background-color: transparent;
    color: #858585;
}

/* Loading (159:2974): the button collapses to a 40 x 40 circle holding nothing but the 20px
   indeterminate spinner, over the pressed-strength surface. CSS only for now -- add the class
   next to a disabled attribute when a button gains a pending state. Nothing wears it today,
   because the one async pill (#addModal-save) is guarded by isSaving with no visual treatment.

   font-size: 0 collapses the label without removing it, so a screen reader still has something
   to read; pair the class with aria-busy="true" where that matters.

   The stroke colour is baked into the exported asset, so the arc itself comes from a per-variant
   rule below rather than from here. min-width is restated for the tertiary variant, whose base
   rule sets it to auto. */
.btn-pill-loading {
    min-width: 40px;
    padding: 10px;
    font-size: 0;
}

.btn-pill-loading::after {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    /* The arc exported from the design, spun by CSS: an indeterminate indicator has to move,
       and the export is one frame of it. @keyframes spin is the one already near the top. */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    animation: spin 1s linear infinite;
}

/* Figma exports the arc twice, once light and once dark; the two files are identical apart from
   the stroke. Dark serves both the outlined and the text variant, whose exports are byte for
   byte the same. */
.btn-pill-primary.btn-pill-loading::after {
    background-image: url(../images/spinner-light.svg);
}

.btn-pill-secondary.btn-pill-loading::after,
.btn-pill-tertiary.btn-pill-loading::after {
    background-image: url(../images/spinner-dark.svg);
}

/* These beat the disabled block above, which the class is meant to be worn with. */
.btn-pill-primary.btn-pill-loading,
.btn-pill-primary.btn-pill-loading:disabled,
.btn-pill-primary.btn-pill-loading[disabled] {
    opacity: 1;
    background-color: #505152;
    border-color: transparent;
    color: transparent;
}

.btn-pill-secondary.btn-pill-loading,
.btn-pill-secondary.btn-pill-loading:disabled,
.btn-pill-secondary.btn-pill-loading[disabled] {
    opacity: 1;
    background-color: rgba(1, 33, 57, 0.13);
    border-color: #6f6f6f;
    color: transparent;
}

.btn-pill-tertiary.btn-pill-loading,
.btn-pill-tertiary.btn-pill-loading:disabled,
.btn-pill-tertiary.btn-pill-loading[disabled] {
    opacity: 1;
    min-width: 40px;
    background-color: transparent;
    border-color: transparent;
    color: transparent;
}

/******************************/
/*   Form layout              */
/******************************/

/* Centred single-column body for a form page. */
.content-column {
    width: 600px;
    max-width: 100%;
    margin: 32px auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* A titled group of fields, separated by space rather than a card. */
.form-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #1d2b1c;
}

/* Spacing comes from .form-section's gap, so clear Bootstrap's default margin. */
.form-section .form-group {
    width: 100%;
    margin-bottom: 0;
}

/* Row of side-by-side fields. Children share the width evenly by default, so a
   two-field row (e.g. First name / Last name) needs no extra classes.
   (Named .field-row because Bootstrap 4 defines .form-row.) */
.field-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.field-row > .form-group {
    flex: 1 1 0;
    min-width: 0;
}

/* Half-width field that should not stretch when it sits alone on a row.
   Matches the width it would have as one of two fields in the same row. */
.field-row > .form-group.field-half {
    flex: 0 0 calc(50% - 8px);
    max-width: 100%;
}

@media (max-width: 700px) {
    .content-column {
        width: 100%;
    }

    .field-row {
        flex-direction: column;
    }

    .field-row > .form-group,
    .field-row > .form-group.field-half {
        flex: 1 1 auto;
        width: 100%;
    }
}

/******************************/
/*   Fields                   */
/******************************/

/* A <label>, so the global "label { margin: 0 40px 0 0; display: none; width: 26px;
   float: right }" rule left over from the old mobile menu has to be reset in full -- not just
   its display, or the label renders as a 26px box floated to the right of its field. */
.field-label {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 2px 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #4c4e49;
}

/* Text input / textarea. Applied explicitly (alongside .form-control) rather
   than scoped to a container, so it can be reused on any page. */
.field-input {
    width: 100%;
    /* overrides the global "input, select, textarea { max-width: 280px }" cap */
    max-width: 100%;
    height: auto;
    padding: 8px 8px 8px 16px;
    background-color: #fff;
    border: 1px solid #90918d;
    border-radius: 4px;
    box-shadow: none;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #4c4e49;
}

.field-input:focus {
    border-color: #4c4e49;
    box-shadow: none;
    outline: none;
}

/* Extra vertical break above a row or block, for groups the design separates with space
   rather than a second heading. Adds to the surrounding flex gap: 8px inside a .form-section
   becomes 48px, and the 32px between .content-column children becomes 72px. */
.section-break {
    margin-top: 40px;
}

/* Supporting text under any field (text input or dropdown). */
.field-help {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    height: 20px;
    padding: 4px 16px 0 16px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #4c4e49;
}

/******************************/
/*   Dropdowns                */
/******************************/

/* bootstrap-select copies the select's classes -- including Bootstrap's
   .form-control -- onto the generated wrapper div (.btn-group.bootstrap-select)
   rather than onto the inner <button>. .form-control forces height: 34px on that
   wrapper, so a taller button overflows it and both the menu (positioned at
   top: 100%) and any following supporting text anchor too high and overlap the
   field. Neutralise .form-control on the wrapper and let it size to the button. */
.form-select.bootstrap-select {
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

/* The generated button is the visible field: match .field-input exactly. */
.form-select.bootstrap-select > .btn.dropdown-toggle {
    width: 100%;
    height: auto;
    padding: 8px 8px 8px 16px;
    text-align: left;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid #90918d !important;
    border-radius: 4px;
    box-shadow: none !important;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #4c4e49;
}

.form-select.bootstrap-select > .btn.dropdown-toggle:focus {
    outline: none !important;
}

.form-select.bootstrap-select.open > .btn.dropdown-toggle {
    border-color: #4c4e49 !important;
}

/* Chevron in place of Bootstrap's solid triangle caret. */
.form-select.bootstrap-select > .btn.dropdown-toggle .caret {
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border: none;
    border-right: 2px solid #4c4e49;
    border-bottom: 2px solid #4c4e49;
    transform: rotate(45deg);
}

/* Menu: surface light 010 with elevation 02. */
.form-select .dropdown-menu {
    width: 100%;
    margin: 4px 0 0 0;
    padding: 8px 0;
    background-color: #f7f7f7;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.form-select .dropdown-menu > li > a {
    padding: 12px 16px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #4c4e49;
}

.form-select .dropdown-menu > li > a:hover,
.form-select .dropdown-menu > li > a:focus,
.form-select .dropdown-menu > li.selected > a:hover,
.form-select .dropdown-menu > li.active > a:hover {
    background-color: rgba(0, 0, 0, 0.04);
    background-image: none;
    color: #4c4e49;
}

/* The selected row is not highlighted in the design. */
.form-select .dropdown-menu > li.selected > a,
.form-select .dropdown-menu > li.active > a {
    background-color: transparent;
    background-image: none;
    color: #4c4e49;
}

/* Separator between groups of options (<option data-divider="true">). */
.form-select .dropdown-menu > li.divider {
    height: 1px;
    margin: 8px 0;
    background-color: #c8ccc3;
}

/* Menu row with a trailing icon, e.g. "Create new group  +".
   Supplied through bootstrap-select's data-content attribute. */
.form-select .dropdown-menu .menu-item-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.form-select .dropdown-menu .menu-item-action i {
    font-size: 16px;
    color: #4c4e49;
}

/* bootstrap-select copies the option's data-content into the closed button too;
   the trailing icon belongs in the menu only. */
.form-select.bootstrap-select > .btn.dropdown-toggle .menu-item-action i {
    display: none;
}

/* Searching a dropdown looks the same wherever it appears, so the two kinds of menu that
   offer it share these rules rather than each having their own:

     .bs-searchbox        bootstrap-select's live search, rendered for any <select> carrying
                          data-live-search="true" -- Group name and Account name on Register,
                          Airport code and Group on Accounts/Create.
     .multiselect-search  the hand-rolled .multiselect menus, which bootstrap-select cannot
                          drive because their options come from Vue after it has already
                          built its menu -- "Hide from accounts" in the upload modal.

   A bordered field inset in the menu, with no icon and no clear button: whatever is added
   here has to be added to bootstrap-select's markup too, which is not ours to change.
   Anything genuinely specific to one of the two belongs beside that component instead --
   .multiselect-search keeps its own sticky positioning down in the multi-select section. */
.form-select .bs-searchbox,
.multiselect-search {
    padding: 4px 16px 8px 16px;
}

.form-select .bs-searchbox .form-control,
.multiselect-search-input {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 6px 12px;
    border: 1px solid #90918d;
    border-radius: 4px;
    box-shadow: none;
    font-size: 14px;
    line-height: 20px;
    color: #4c4e49;
}

.form-select .bs-searchbox .form-control:focus,
.multiselect-search-input:focus {
    border-color: #4c4e49;
    box-shadow: none;
    outline: none;
}

.form-select .bs-searchbox .form-control::placeholder,
.multiselect-search-input::placeholder {
    color: rgba(76, 78, 73, 0.7);
}

/******************************/
/*   Toggle rows              */
/******************************/

/* Vertical list of "label + switch" rows, e.g. a block of permission toggles.
   A group in its own right, so it sits on the same 32px rhythm as a .form-section. */
.toggle-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.toggle-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.toggle-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* A <label>, so the global "label { display: none; float: right; width: 26px }"
   rule left over from the old mobile menu has to be reset in full. */
.toggle-label {
    display: block;
    float: none;
    width: auto;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #4c4e49;
    cursor: pointer;
}

/* Set explicitly because the global "span { color: #54D17A }" rule would win otherwise. */
.toggle-description {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #4c4e49;
}

/******************************/
/*   Switch                   */
/******************************/

/* A checkbox drawn as a 52x28 track with a sliding 20px handle. Markup:
   <label class="switch"><input type="checkbox" /><span class="switch-track"></span></label>
   The checkbox stays in the DOM and keeps its name, so the value still posts. The
   state selectors below use "~" rather than "+" because asp-for emits a hidden
   "false" input between the checkbox and the track. */
.switch {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    float: none;
    width: 52px;
    height: 28px;
    margin: 0;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}

/* Kept clickable and focusable rather than display: none, so the switch still works
   from the keyboard. */
.switch > input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.switch-track {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #e6e6e6;
    border: 1px solid #90918d;
    border-radius: 100px;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Handle: 20px circle resting 4px from the track edge it is against.
   Positioned against .switch, which is the nearest positioned ancestor. */
.switch-track::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background-color: #90918d;
    border-radius: 100px;
    transition: left 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.switch > input[type="checkbox"]:checked ~ .switch-track {
    background-color: #1d2b1c;
    border-color: #1d2b1c;
}

.switch > input[type="checkbox"]:checked ~ .switch-track::before {
    /* 52 - 4 - 20 */
    left: 28px;
    background-color: #fff;
}

.switch > input[type="checkbox"]:focus ~ .switch-track {
    outline: 2px solid #4c4e49;
    outline-offset: 2px;
}

.switch > input[type="checkbox"]:disabled {
    cursor: default;
}

.switch > input[type="checkbox"]:disabled ~ .switch-track {
    opacity: 0.38;
}

/******************************/
/*   Disabled fields          */
/******************************/

/* Read-only look for a field the user cannot change, e.g. a CMS mode that is
   governed by the account's group. */
.field-input:disabled,
.field-input[readonly] {
    background-color: #e6e6e6;
    color: rgba(76, 78, 73, 0.6);
}

/* bootstrap-select marks the wrapper .disabled and the generated button [disabled];
   both are matched so the field greys out whichever way it was disabled. */
.form-select.bootstrap-select.disabled > .btn.dropdown-toggle,
.form-select.bootstrap-select > .btn.dropdown-toggle[disabled] {
    background-color: #e6e6e6 !important;
    color: rgba(76, 78, 73, 0.6);
    opacity: 1;
}

/******************************/
/*   Required / error text    */
/******************************/

/* Red asterisk after a .field-label on a required field. A <span>, so the global
   "span { color: #54D17A }" rule has to be overridden explicitly. */
.field-required {
    color: #ba1a1a;
}

/* Validation message under a field, in place of .field-help. Height is not fixed the way
   .field-help's is, because these messages wrap. */
.field-error {
    display: block;
    width: 100%;
    padding: 4px 16px 0 16px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #ba1a1a;
}

.field-input.is-invalid,
.field-input.is-invalid:focus {
    border-color: #ba1a1a;
}

/* bootstrap-select puts the visible border on the generated button, not the select. */
.form-select.bootstrap-select.is-invalid > .btn.dropdown-toggle {
    border-color: #ba1a1a !important;
}

/******************************/
/*   Modal                    */
/******************************/

/* Dialog shell for the redesigned modals. Standalone: it replaces Bootstrap's
   .modal-dialog / .modal-content chrome rather than restyling it, so the two can coexist
   while pages are migrated one at a time. Markup:

     <div class="modal fade" id="...">
       <div class="cms-modal-shell">
         <div class="cms-modal">
           <div class="cms-modal-header">...</div>
           <div class="cms-modal-body">...</div>
           <div class="cms-modal-footer">...</div>
         </div>
         <div class="cms-modal-aside">...</div>       (optional side panel)
       </div>
     </div>

   The header class is deliberately NOT .modal-header: the page-wide draggable() call in
   ViewAll.cshtml uses ".modal-header" as its handle, so it finds nothing here and these
   dialogs stay anchored while the older modals remain draggable. */
/* Pages that initialise their modals with backdrop: false (as the assets page does, so its
   stacked "Create new category" dialog still works) get the design's dimmed page by having
   the .modal element paint its own scrim instead. */
.modal.cms-modal-scrim {
    background-color: rgba(0, 0, 0, 0.32);
}

/* align-items: stretch so a .cms-modal-aside is exactly as tall as the .cms-modal it is
   docked to, which is how the design draws the pair (Figma 57:3665 -- both frames 740 high).
   A shell holding only a .cms-modal is unaffected: with one item the flex line's cross size
   is that item's own height, so stretching it is a no-op. */
.cms-modal-shell {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    /* Clears the fixed navbar and leaves room to breathe at the bottom. */
    margin: 40px auto;
    padding: 0 16px;
    font-family: 'Roboto', sans-serif;
}

/* The cancel-upload confirmation centres in the viewport instead of hanging 40px from the top
   like the tall dialogs (Figma 157:2523). At 188px high the shared top-anchored margin strands
   it well above the upload modal it is interrupting. Scoped to the id because the shell is
   shared with #addModal, #editModal and #addCategoryModal, which all want the margin.
   Bootstrap's .modal is inset 0 on every side, so min-height: 100% resolves against the
   viewport; .modal-open .modal keeps overflow-y: auto, so a longer translation can still
   scroll rather than being clipped. align-items only matters for a .cms-modal-aside, and this
   dialog has none. */
#cancelUploadModal .cms-modal-shell {
    align-items: center;
    min-height: 100%;
    margin: 0;
    padding: 16px;
}

.cms-modal {
    flex: 0 0 auto;
    width: 500px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    /* Fits between the navbar and the viewport bottom; .cms-modal-body scrolls. */
    max-height: calc(100vh - 96px);
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.cms-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 6px 10px 16px;
    border-bottom: 1px solid #c8ccc3;
}

/* On the heading element itself, so any heading level can be used. */
.cms-modal-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0;
    color: #1d2b1c;
}

/* 24px glyph centred in a 48px circular hit area, matching .back-arrow's treatment. */
.cms-modal-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 100px;
    font-size: 24px;
    line-height: 1;
    color: #4c4e49;
    cursor: pointer;
}

/* Bootstrap's .close is usually on this button for data-dismiss; its float, opacity and
   text-shadow would break the flex centring above. */
.cms-modal-close.close {
    float: none;
    opacity: 1;
    text-shadow: none;
}

.cms-modal-close:hover, .cms-modal-close:focus {
    background-color: rgba(0, 0, 0, 0.04);
    color: #4c4e49;
    opacity: 1;
    outline: none;
}

/* The only scrolling region, so the header and footer stay put on a long form. */
.cms-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Spacing comes from the gap above, so clear Bootstrap's default margin. */
.cms-modal-body .form-group {
    width: 100%;
    margin-bottom: 0;
}

.cms-modal-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 16px;
    border-top: 1px solid #c8ccc3;
}

/* Narrow dialog for a single-question step, e.g. "Create new category". */
.cms-modal-sm {
    width: 400px;
}

/* Wider sibling of .cms-modal-sm, for a confirmation whose message needs a line of its own
   rather than a field -- e.g. "Cancel upload" (Figma 157:2523, 544 x 188). Same chrome-less
   header and footer, which is why it borrows the rules below rather than defining its own.
   The rounder corner, hairline border and Elevation 01 are this card's own, and they land here
   rather than on .cms-modal so the three larger dialogs keep the flatter treatment they were
   drawn with. Same specificity as .cms-modal, later in the file, so it wins on source order. */
.cms-modal-md {
    width: 544px;
    border: 1px solid #c8ccc3;
    border-radius: 16px;
    /* Elevation 01. */
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.cms-modal-sm .cms-modal-header,
.cms-modal-md .cms-modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.cms-modal-sm .cms-modal-footer,
.cms-modal-md .cms-modal-footer {
    border-top: none;
}

/* With no chrome to line up against, this dialog sets its own 24px column and the title, the
   message and the primary button all sit on it. The footer's 8 on the left is the design's own
   (Figma's Actions row is pl-8) and does no positioning work here anyway -- the footer is
   justify-content: flex-end, so only the 24 on the right places anything. */
.cms-modal-md .cms-modal-header {
    padding: 24px 24px 0 24px;
}

.cms-modal-md .cms-modal-title {
    font-size: 24px;
    line-height: 32px;
    color: #4c4e49;
}

.cms-modal-md .cms-modal-message {
    padding: 16px 24px;
}

.cms-modal-md .cms-modal-footer {
    gap: 8px;
    padding: 20px 24px 20px 8px;
}

/* The message under the title in a confirmation dialog. 16px here to line up with
   .cms-modal-header's own left padding, which is what the "Create new category" dialog needs;
   .cms-modal-md overrides it to the 24 its frame is drawn on. */
.cms-modal-message {
    margin: 0;
    padding: 4px 16px 0 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #4c4e49;
}

/******************************/
/*   Modal side panel         */
/******************************/

/* Secondary panel docked to the right of a .cms-modal, so the pair centres as one unit.
   Used for "Restrict visibility", which needs more room than the form column has.
   Its height comes from .cms-modal-shell's align-items: stretch -- it always matches the
   dialog it is docked to, and .cms-modal-aside-body takes up the slack. The recessed
   surface (Figma "surface light 010") is what separates it from the white dialog and from
   the white fields inside it. */
.cms-modal-aside {
    flex: 0 0 auto;
    width: 400px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 96px);
    background-color: #f7f7f7;
    border-left: 1px solid #c8ccc3;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.cms-modal-aside-header {
    flex: 0 0 auto;
    padding: 14px 16px 6px 16px;
}

.cms-modal-aside-title {
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    color: #1d2b1c;
}

/* Set explicitly because the global "span { color: #54D17A }" rule would win otherwise. */
.cms-modal-aside-subtitle {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #4c4e49;
}

.cms-modal-aside-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The seam, when a panel is docked (.has-aside is set by the view alongside the panel's own
   v-if). Both parts carry their own elevation and their own 8px corners, which is right when
   either stands alone but wrong where they meet: the dialog's rounded right corners let the
   scrim show through the join, and the panel's shadow -- 16px of blur in every direction --
   falls across the dialog as a grey band. So square off the two edges that touch, and clip
   the panel's shadow at its left border edge. The negative insets are just "do not clip",
   large enough to clear the 16px blur plus its 4px offset; only the 0 side does any work. */
.cms-modal-shell.has-aside > .cms-modal {
    border-radius: 8px 0 0 8px;
}

.cms-modal-shell.has-aside > .cms-modal-aside {
    clip-path: inset(-24px -24px -24px 0);
}

/* A note with a leading info icon, e.g. the caveat under "Manage accounts". */
.cms-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #4c4e49;
}

.cms-note > i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 14px;
    color: #4c4e49;
}

/* Below this the two panels cannot sit side by side, so the panel drops under the dialog
   and both go full width. */
@media (max-width: 960px) {
    .cms-modal-shell {
        flex-direction: column;
        align-items: center;
    }

    .cms-modal,
    .cms-modal-aside {
        width: 500px;
        max-height: none;
    }

    .cms-modal-aside {
        border-left: none;
        border-top: 1px solid #c8ccc3;
        border-radius: 0 0 8px 8px;
    }

    /* Stacked, so the seam is the horizontal one between them instead. */
    .cms-modal-shell.has-aside > .cms-modal {
        border-radius: 8px 8px 0 0;
    }

    .cms-modal-shell.has-aside > .cms-modal-aside {
        clip-path: inset(0 -24px -24px -24px);
    }
}

@media (max-width: 560px) {
    .cms-modal,
    .cms-modal-aside {
        width: 100%;
    }
}

/******************************/
/*   Segmented control        */
/******************************/

/* Radio group drawn as a pill track with the selected option raised out of it, e.g.
   Yes/No or Image-Video/URL. Markup:

     <div class="segmented">
       <label class="segmented-option"><input type="radio" name="X" value="a" /><span>A</span></label>
       <label class="segmented-option"><input type="radio" name="X" value="b" /><span>B</span></label>
     </div>

   Deliberately not .switch-field: that is the older green-highlight style, still used
   elsewhere in this file, and the two must not change together. The radios stay in the DOM
   and keep their name, so the value still posts and arrow keys still work. */
/* Sized by its labels, so a standalone Yes/No group stays compact instead of stretching the
   width of the form. max-width is the important half: inside a .field-row the column is a
   fixed half-share (.field-row > .form-group is flex: 1 1 0), and a group wider than that
   used to spill out of the column and put a horizontal scrollbar on the whole dialog.
   Capped here, the options shrink instead. border-box so the 3px track padding is inside
   that cap. */
.segmented {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    padding: 3px;
    box-sizing: border-box;
    background-color: #e6e6e6;
    border-radius: 8px;
}

/* A <label>, so the global "label { display: none; float: right; width: 26px }" rule left
   over from the old mobile menu has to be reset in full. */
/* Sized by its own label (flex-basis auto, no grow), so "Image/Video" gets the room it needs
   and "URL" stays narrow. Shrinkable with min-width: 0 so the group can honour its parent's
   max-width; the span below ellipsises if it ever comes to that. No fixed min-width, and no
   padding here -- the inner span carries it, so it can also carry the raised background
   without the two boxes fighting over the same edges. */
.segmented-option {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    display: inline-block;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.1px;
    color: #4c4e49;
    text-align: center;
    cursor: pointer;
}

/* Kept clickable and focusable rather than display: none, so the group still works from
   the keyboard. */
.segmented-option > input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* :checked cannot style its parent label, so the raised look goes on the inner span, which
   fills it. display: block rather than flex, and the padding sized with border-box, because
   Bootstrap sets box-sizing globally: an earlier version used width: 100% plus padding plus
   negative margins, which subtracted the padding twice and clipped longer labels. 7px + 16px
   line + 7px is the design's 30px option inside the 36px track. text-overflow is the last
   resort if a translation is longer than its column. */
.segmented-option > span {
    /* A block inside an inline-block label: it fills the label's width and the label
       shrink-wraps to it, with no percentage width to resolve circularly.
       Generous side padding is what gives the options the design's width, rather than a fixed
       min-width that could not shrink when a translation ran long. */
    display: block;
    padding: 7px 18px;
    box-sizing: border-box;
    border-radius: 6px;
    line-height: 16px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.segmented-option:hover > span {
    background-color: rgba(0, 0, 0, 0.04);
}

.segmented-option > input[type="radio"]:checked ~ span {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    font-weight: 500;
    color: #1d2b1c;
}

/* :focus-visible, not :focus -- a radio keeps focus after a mouse click, which drew a dark
   ring around the option the user had just picked. This shows the ring for keyboard
   navigation only. */
.segmented-option > input[type="radio"]:focus-visible ~ span {
    outline: 2px solid #4c4e49;
    outline-offset: 1px;
}

.segmented-option > input[type="radio"]:disabled {
    cursor: default;
}

.segmented-option > input[type="radio"]:disabled ~ span {
    opacity: 0.38;
}

/******************************/
/*   Chip field               */
/******************************/

/* Bordered box of removable chips, with an optional right-aligned action above it
   ("Clear all (4)"). Shared by Tags and by "Manage accounts" in the Restrict visibility
   panel, which is why it carries no field-specific sizing. */
.chip-field {
    width: 100%;
    min-height: 74px;
    padding: 8px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #90918d;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
}

/* Taller box for a standalone list, e.g. the accounts panel where the chips are the whole
   content rather than one field among many. */
.chip-field-tall {
    min-height: 160px;
}

/* Chips read as links in the design: blue text on a light blue outline. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 8px;
    background-color: #fff;
    border: 1px solid #a6c8ff;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.4px;
    color: #0b57d0;
}

.chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    line-height: 1;
    color: #0b57d0;
    cursor: pointer;
}

.chip-remove:hover, .chip-remove:focus {
    color: #001d35;
    outline: none;
}

/* Row above the box holding the count / clear action. */
.chip-field-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-height: 20px;
}

.chip-field-clear {
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #0b57d0;
    text-decoration: underline;
    cursor: pointer;
}

.chip-field-clear:hover, .chip-field-clear:focus {
    color: #001d35;
    text-decoration: underline;
}

/* Comma-separated entry that sits inside the chip box and grows to fill the last row. */
.chip-input {
    flex: 1 1 120px;
    min-width: 120px;
    max-width: 100%;
    height: 22px;
    padding: 0 4px;
    background: none;
    border: none;
    box-shadow: none;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.25px;
    color: #4c4e49;
}

.chip-input:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

/* Trailing "+" that submits whatever is typed, matching the design's affordance. */
.chip-field-add {
    flex-shrink: 0;
    align-self: center;
    padding: 0 4px;
    background: none;
    border: none;
    font-size: 16px;
    line-height: 1;
    color: #4c4e49;
    cursor: pointer;
}

.chip-field-add:hover, .chip-field-add:focus {
    color: #000;
    outline: none;
}

/******************************/
/*   File field               */
/******************************/

/* The three states of a single-file picker: nothing chosen (button + accepted formats),
   uploading (name, size and a progress bar), and done (name, size and a confirmation).
   The file input is wrapped by the button label, which is what makes the pill clickable
   without a separate hidden-input hack. */
/* Fixed-height slot, and that is the point of it: the design gives this field the same
   footprint in all four of its states (Figma 57:2120 and 57:2292 are both 500x740, with the
   body frame 618 in both), so picking or clearing a file must not move anything below it --
   Restrict visibility, Title, the dates, Tags and the footer edge all sit on it.

   62 is measured from what this actually renders, NOT read off the design, and the difference
   matters: Figma's Button V3 is 40 high, but .btn-pill comes out at 42 (10px padding twice,
   1px border twice, 20px line-height). So the tallest state is the idle one at 42 + 20 for
   .field-help -- which carries an explicit height: 20px -- and a one-line .field-error comes
   to the same 62. The cards are shorter (54 uploading, 50 done) and centre in the slot. Deriving
   this floor from the design's 40 instead is what left it at 60 and made the dialog jitter 2px
   every time a file was added or removed.

   min-height rather than height so a validation message that wraps to a second line grows the
   slot instead of being clipped. A card and an error never coexist -- validateFilesize clears
   the file before setting addErrors.file -- so that is the only case that can exceed 62. */
.file-field {
    width: 100%;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* A <label>, so the global label rule has to be reset in full. .btn-pill supplies the
   rest of the look. */
.file-upload-button {
    position: relative;
    align-self: flex-start;
    float: none;
    width: auto;
    margin: 0;
    overflow: hidden;
}

.file-upload-button > input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Once a file is chosen, the name, the progress bar and the "Uploaded" confirmation all live
   inside one bordered card (Figma 57:2464 in progress, 57:2656 done) rather than as separate
   rows under the field. The card's own padding provides the inset, so nothing inside it
   carries the 16px side margins the loose rows used to need. */
.file-card {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 16px;
    background-color: #fff;
    /* grays/slate/7 -- lighter than the .field-input border, per the design. */
    border: 1px solid #d7dbdf;
    border-radius: 8px;
}

.file-card-row {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
}

/* min-width: 0 is what lets .file-card-name's ellipsis actually engage -- without it the
   flex item refuses to shrink below its text and the name overflows the card instead. */
.file-card-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* The in-progress card sets the name away from the bar; the done card has no such gap
   because the status line sits directly under the name. */
.file-card.is-uploading > .file-card-row > .file-card-content {
    padding-bottom: 8px;
    gap: 10px;
}

.file-card-name-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* Colour set explicitly because the global "span { color: #54D17A }" rule would win. */
.file-card-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #11181c;
}

/* Underlined and one weight heavier than the name, as designed. */
.file-card-size {
    flex-shrink: 0;
    padding-left: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #11181c;
    text-decoration: underline;
}

.file-card-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: none;
    font-size: 14px;
    line-height: 1;
    color: #11181c;
    cursor: pointer;
}

.file-card-remove:hover, .file-card-remove:focus {
    color: #000;
    outline: none;
}

/* 2px track, full width of the card's content column. Replaces Bootstrap's .progress block,
   which is 20px tall and striped. */
.file-progress {
    width: 100%;
    height: 2px;
    background-color: #d7dbdf;
    overflow: hidden;
}

.file-progress-bar {
    height: 100%;
    width: 0;
    background-color: #11181c;
    transition: width 0.1s linear;
}

/* The "Uploaded" line on the done card. colors/green/11. */
.file-card-status {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #18794e;
}

.file-card-status > i {
    flex-shrink: 0;
    font-size: 12px;
    color: #18794e;
}

/******************************/
/*   Dropdown action row      */
/******************************/

/* A fixed action pinned to the top of a .multiselect-menu, e.g. "Create new category +".
   Sticky rather than scrolling away with the options, so it stays reachable in a long list.
   The negative offset cancels the menu's own 8px top padding. */
.select-action-row {
    position: sticky;
    top: -8px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    box-sizing: border-box;
    background-color: #fff;
    border: none;
    border-bottom: 1px solid #c8ccc3;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #4c4e49;
    text-align: left;
    cursor: pointer;
}

.select-action-row:hover, .select-action-row:focus {
    background-color: #f2f2f2;
    outline: none;
}

/* Same row pinned to the bottom of the menu instead of the top, e.g. "Select all" under the
   accounts in "Hide from accounts". The rule above is undone rather than duplicated, so the
   two variants cannot drift apart. */
.select-action-row-bottom {
    top: auto;
    bottom: -8px;
    border-bottom: none;
    border-top: 1px solid #c8ccc3;
}

/******************************/
/*   Multi-select             */
/******************************/

/* Checkbox dropdown for picking several values, e.g. "Hide from accounts". Hand-rolled
   rather than bootstrap-select with multiple: bootstrap-select builds its menu once at
   init, and this menu lives inside a v-if panel that does not exist yet at that point.
   Driven entirely by the surrounding Vue instance, so the options can change freely.
   Markup:

     <div class="multiselect" :class="{ 'is-open': open }">
       <button type="button" class="multiselect-toggle">...</button>
       <div class="multiselect-menu" v-if="open">
         <label class="multiselect-item"><input type="checkbox" /><span>...</span></label>
       </div>
     </div>                                                                            */
.multiselect {
    position: relative;
    width: 100%;
}

/* Matches .field-input / the bootstrap-select button exactly, so a multi-select and a
   single select sit at the same height in the same form. */
.multiselect-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 8px 8px 16px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #90918d;
    border-radius: 4px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #4c4e49;
    text-align: left;
    cursor: pointer;
}

.multiselect-toggle:focus {
    border-color: #4c4e49;
    outline: none;
}

.multiselect-toggle.is-invalid,
.multiselect-toggle.is-invalid:focus {
    border-color: #ba1a1a;
}

.multiselect-toggle > i {
    flex-shrink: 0;
    font-size: 12px;
    color: #4c4e49;
    transition: transform 0.15s ease-in-out;
}

.multiselect.is-open > .multiselect-toggle > i {
    transform: rotate(180deg);
}

/* Placeholder text when nothing is picked yet. A <span>, so the global
   "span { color: #54D17A }" rule has to be overridden explicitly. */
.multiselect-placeholder {
    color: rgba(76, 78, 73, 0.7);
}

.multiselect-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4c4e49;
}

/* z-index clears .cms-modal-aside's stacking; max-height matches the design's scrolling
   menu of about five rows. */
.multiselect-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1052;
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #c8ccc3;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* A <label>, so the global label rule has to be reset in full. */
.multiselect-item {
    display: flex;
    align-items: center;
    gap: 10px;
    float: none;
    width: 100%;
    margin: 0;
    padding: 10px 16px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
    color: #4c4e49;
    cursor: pointer;
}

.multiselect-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Single-select variant marks the current value instead of showing a checkbox. */
.multiselect-item.is-selected {
    background-color: #e6e6e6;
    font-weight: 500;
}

.multiselect-item > input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
}

.multiselect-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4c4e49;
}

.multiselect-empty {
    padding: 10px 16px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(76, 78, 73, 0.7);
}

/* A menu that spends part of its height on pinned furniture -- a search row above and a
   "Select all" row below -- needs more of it, or the four rows left between them defeat the
   point of having a filter at all. */
.multiselect-menu-tall {
    max-height: 340px;
}

/* The search field itself is styled with bootstrap-select's .bs-searchbox further up, so the
   two look identical. Only the pinning is specific to this menu: bootstrap-select scrolls its
   options in a separate .inner element, which leaves its search box sitting still for free,
   whereas here the options are siblings of the search and would carry it away with them.
   Sticky for the same reason .select-action-row is, with the same -8px offset cancelling the
   menu's top padding, and an opaque background so rows do not show through underneath. */
.multiselect-search {
    position: sticky;
    top: -8px;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
}

/******************************/
/*   Toast / snackbar         */
/******************************/

/* Confirmation docked bottom-centre over the page (Figma 46:2386 "Snackbar"), replacing the
   SweetAlert popup these messages used to raise. The point of the change is that it does not
   block: the work already succeeded, so there is nothing to acknowledge, and an OK button in
   the way of the next action is a cost with no return.

   Raised through toastr -- see wwwroot/js/vv-toast.js, which the layout loads on every page --
   so everything below is overriding toastr's own look, which is a 300px green box in the
   top-right with a base64 tick baked into background-image. Three things make that a fight:

     - its base rule is "#toast-container > div", so ours has to out-specify (1,0,1);
     - "#toast-container.toast-bottom-center > div" is (1,1,1), which is why the width override
       repeats the position class to reach (1,2,0);
     - its type icon is set with !important, so background-image: none has to be too. That one
       is won on source order, which is why toastr.min.css is linked BEFORE site.css.

   The class doing the work is the one vv-toast.js hands to toastr as toastClass. A second kind
   of toast is another block like this plus one function there. */
#toast-container.toast-bottom-center {
    bottom: 24px;
}

#toast-container > .cms-toast-success {
    position: relative;
    margin: 0;
    /* 16 left + 24 icon + 8 gap puts the text at 48, and 48 right leaves the close button its
       square -- both straight off the design. Vertically it is 12 + 24 + 12: the icon is the
       taller of the two things on the row, not the 20px text, so the padding is measured against
       it. (Figma 46:2386 puts its content frame at y=12, 24 high, in a 48 high toast.) */
    padding: 12px 48px 12px 16px;
    /* fit-content, not auto: #toast-container is width:100% for a bottom-center position, so
       auto makes every toast a full 560 regardless of how short the message is. The design
       sizes to the text (331px for its sample), with max-width only as the ceiling. */
    width: fit-content;
    max-width: 560px;
    max-width: min(560px, calc(100vw - 32px));
    min-height: 48px;
    /* surface dark 020 */
    background-color: #262b2d;
    background-image: none !important;
    border-radius: 4px;
    /* Elevation 03 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    /* toastr ships .8 and lifts it on hover; the design is flat. */
    opacity: 1;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}

/* (1,2,0), to beat "#toast-container.toast-bottom-center > div" at (1,1,1). Without this the
   toast is pinned at toastr's 300px and a filename cannot use the width it needs. */
#toast-container.toast-bottom-center > .cms-toast-success {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

#toast-container > .cms-toast-success:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
    opacity: 1;
}

/* toastr's own wrapper around whatever markup it was handed. */
#toast-container > .cms-toast-success > .toast-message {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.25px;
    /* text/body/inverse */
    color: #fff;
}

/* The icon slot. Empty in the markup on purpose: which glyph it carries and what colour it is
   is decided by the variant rule below, so vv-toast.js never names an icon. */
.cms-toast-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 18px;
}

/* Success: fa-check-circle in icon/success. Font Awesome 5 Free solid is weight 900 -- anything
   else silently renders a blank box. */
.cms-toast-success .cms-toast-icon::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-style: normal;
    line-height: 1;
    content: "\f058";
    color: #76c644;
}

/* Set explicitly because the global "span { color: #54D17A }" rule near the top of this file
   wins over anything that only colours an ancestor. */
.cms-toast-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

/* toastr floats this with a text-shadow and .8 opacity; the design gives it a 48px square on the
   right. (1,2,0) clears both ".toast-close-button" and "button.toast-close-button". */
#toast-container > .cms-toast-success > .toast-close-button {
    position: absolute;
    top: 0;
    right: 0;
    float: none;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 48px;
    text-align: center;
    text-shadow: none;
    /* icon/inverse */
    color: #e6e6e6;
    opacity: 1;
}

#toast-container > .cms-toast-success > .toast-close-button:hover,
#toast-container > .cms-toast-success > .toast-close-button:focus {
    color: #fff;
    opacity: 1;
}

/******************************/
/*   Inherited text colour    */
/******************************/

/* The global "span { color: #54D17A }" rule near the top of this file wins over any element
   that only sets colour on the parent, so every <span> inside the components above has to
   opt back in explicitly or it renders bright green. color: inherit rather than a literal,
   so each one keeps following whatever its container is set to. */
.chip-label,
.segmented-option > span,
.cms-note > span,
.select-action-row > span,
.file-card-status > span,
.cms-modal-title > span,
.cms-modal-footer > span {
    color: inherit;
}

/*************************************************************/
/*   Asset preview modal (story 6567).                       */
/*                                                            */
/*   Values below come from the Figma spec written into the  */
/*   work item (dev.azure.com #6567): modal 1040x641 at a     */
/*   1440 viewport, header 56px / surface dark 020 #262b2d,   */
/*   asset name 14/20 SemiBold #fff, metadata 12/16 Regular   */
/*   #e6e6e6, 48x48 icon buttons, 100x24 chip, 4px/12px seek  */
/*   track/handle, 64px/10px volume track/handle. The Figma   */
/*   file itself could not be opened directly (browser-tool   */
/*   access to figma.com was blocked) -- one value here is a  */
/*   stand-in pending confirmation: the modal shadow, spec'd  */
/*   only as token name "BS050" with no value available in    */
/*   this codebase's own tokens (there are no CSS custom      */
/*   properties / :root block anywhere in this file). The     */
/*   watermark pattern (component 1:704) was given explicitly */
/*   after the fact -- see .asset-preview-watermark below.    */
/*************************************************************/

.asset-preview-scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050; /* clears the fixed header/left nav; nothing else in this file goes above 10000 anyway */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
}

.asset-preview-modal {
    display: flex;
    flex-direction: column;
    width: min(1040px, calc(100vw - 64px));
    max-height: calc(100vh - 64px);
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    /* stand-in for Figma token "BS050" -- see banner comment above */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.asset-preview-header {
    flex: 0 0 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 8px 0 16px;
    background-color: #262b2d;
    box-sizing: border-box;
}

.asset-preview-header-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.asset-preview-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-preview-meta {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #e6e6e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-preview-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 48x48 icon button, sized up from the app's existing .icon-container /
   .icon-inner-container hover mechanism (site.css ~4180) for this modal's dark surface. */
.asset-preview-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #e6e6e6;
    font-size: 18px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.asset-preview-icon-btn:hover, .asset-preview-icon-btn:focus {
    color: #e6e6e6;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 100px;
}

.asset-preview-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100px;
    height: 24px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.12);
    color: #e6e6e6;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.asset-preview-chip i {
    font-size: 11px;
}

.asset-preview-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0; /* lets the flex child shrink so its own overflow rules can take effect */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

/* Always the full width of the stage, not shrink-wrapped to the media's own rendered size --
   otherwise a portrait video renders narrower than the stage and .asset-preview-controls (which
   is sized to this wrap, not the video, so it keeps working once this element goes fullscreen)
   ends up too narrow and off-centre under it. This is also what a fullscreen video naturally
   looks like: a full-width container with the video letterboxed and centred inside it, and a
   full-width control bar sitting on top -- this rule just makes the non-fullscreen stage match
   that, rather than being a special case. */
.asset-preview-media-wrap {
    position: relative;
    width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contained, never cropped: portrait, ultra-wide and oversized assets all letterbox
   inside the stage instead of scrolling or overflowing the modal. */
.asset-preview-media {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 64px - 56px);
    object-fit: contain;
}

/* Applied to the media element only when the asset is view-only (see _AssetPreviewModal.cshtml) --
   without it, an <img> is natively draggable, so it can be dropped straight onto the desktop or
   another window to save it, bypassing the disabled right-click menu entirely. user-drag has no
   unprefixed/standard form and is WebKit/Blink-only (Chrome, Safari, Edge); Firefox has no CSS
   equivalent at all, which is what the element's own draggable="false" attribute is for instead --
   the two together cover both mechanisms. user-select is included so the browser's native "copy
   image"/drag affordance doesn't kick in via a text-style selection drag either. */
.no-drag {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Survives fullscreen because it is a sibling of the media inside .asset-preview-media-wrap,
   which is the element that goes fullscreen (see togglePreviewFullscreen in asset-preview.js) --
   not a child of the modal, which would be left behind. Never intercepts a click, so it never
   blocks the control bar underneath it.
   Pattern: intersecting 45deg lines, each drawn as a thin white centre line over a slightly wider
   black stroke (a halo), so the line reads clearly whether the asset behind it is light or dark.
   Tile is a square (56x56) so the corner-to-corner diagonals line up seamlessly between repeats
   into a continuous crosshatch, rather than a per-tile grid. The lines themselves are fully
   opaque -- the element's own `opacity` below is what makes the whole watermark subtle, so the
   black/white contrast isn't washed out by stacking two different opacities on top of each other. */
.asset-preview-watermark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cline x1='0' y1='0' x2='56' y2='56' stroke='%23000000' stroke-width='5'/%3E%3Cline x1='56' y1='0' x2='0' y2='56' stroke='%23000000' stroke-width='5'/%3E%3Cline x1='0' y1='0' x2='56' y2='56' stroke='%23ffffff' stroke-width='2'/%3E%3Cline x1='56' y1='0' x2='0' y2='56' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.asset-preview-no-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #e6e6e6;
    text-align: center;
}

.asset-preview-caution-icon {
    width: 90px;
    height: 90px;
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-preview-no-preview-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

/******************************/
/*   Video control bar        */
/******************************/

.asset-preview-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2; /* above .asset-preview-watermark, so the watermark never blocks these controls */
    height: 96px;
    box-sizing: border-box;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}

.asset-preview-control-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.asset-preview-control-btn:hover, .asset-preview-control-btn:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border-radius: 100px;
}

.asset-preview-time {
    flex: 0 0 auto;
    min-width: 38px;
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.asset-preview-seek-track {
    position: relative;
    flex: 1 1 auto;
    height: 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.asset-preview-seek-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.3);
}

.asset-preview-seek-buffered, .asset-preview-seek-played {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
}

.asset-preview-seek-buffered {
    background-color: rgba(255, 255, 255, 0.5);
}

.asset-preview-seek-played {
    background-color: #fff;
}

.asset-preview-seek-handle {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
    border-radius: 100px;
    background-color: #fff;
}

.asset-preview-volume-track {
    position: relative;
    flex: 0 0 64px;
    height: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.asset-preview-volume-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.3);
}

.asset-preview-volume-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background-color: #fff;
}

.asset-preview-volume-handle {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: -5px;
    border-radius: 100px;
    background-color: #fff;
}

@media (max-width: 700px) {
    .asset-preview-controls {
        gap: 8px;
        padding: 0 8px;
    }

    .asset-preview-volume-track {
        display: none;
    }
}