*{
 box-sizing: border-box;
}
body {
    margin: 0;
    font-family: 'Roboto Condensed', arial !important;
    font-size: 14px;
    background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(211, 211, 211) 100%);
}
h1{
font-size: 28px !important;
font-weight: 400;
}
.left{
 float:left;
}
.right{
 float:right;
}
.clear{
 clear:both;
}
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-gap: 1px;
    background-color: #fff;
}
.country-filter-result {
    grid-template-columns: auto auto auto auto;
}
.device-filter-result {
    grid-template-columns: auto auto auto auto;
}
.product-filter-result {
    grid-template-columns: auto auto auto auto;
}
.sector-filter-result {
    grid-template-columns: auto auto auto auto;
}
.advertiser-filter-result {
    grid-template-columns: auto auto auto auto;
}
.role-filter-result {
    grid-template-columns: auto auto;
}
.demo-filter-reguests-result {
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto !important;
}
#flip-scroll1{
    position: relative;
}

#flip-scroll, #flip-scroll1 {
    background-color: #fff;
}
    #flip-scroll .grid-buttons br, #flip-scroll1 .grid-buttons br {
        display: none;
    }
    #flip-scroll table, #flip-scroll1 table {
        width: 100%;
        border-collapse: separate !important;
        border-spacing: 2px;
    }
    .grid-container > div, #flip-scroll th, #flip-scroll td, #flip-scroll1 th, #flip-scroll1 td {
        background-color: rgba(239, 237, 237, 0.8);
        text-align: center;
        padding: 15px 10px;
        font-size: 14px;
        text-align: left;
    }
header{
 background: #414042;
 width: 100%;
 padding: 10px 0;
 color:#fff;
 height: 65px;
}
header img{
 height: 40px;
}
header a{
 color:#fff;
 line-height: 50px;
}
.menu{
 max-width: 80%;
 margin: 0 auto;
}
#main-container {
    padding: 10%;
    background: url(../images/bg-shadow.png) no-repeat top -300px center;
    /*background-size: cover;*/
}
form{
    margin: 0 auto;
    width: 30%;
    border: 1px solid #dadce0;
    padding: 3% 2%;
    text-align: center;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 32px 10px rgba(0,0,0,0.09);
    -moz-box-shadow: 0px 0px 32px 10px rgba(0,0,0,0.09);
    box-shadow: 0px 0px 32px 10px rgba(0, 0, 0, 0.09);
}
    .noForm {
        margin: inherit !important;
        width: inherit !important;
        border: inherit !important;
        padding: inherit !important;
        text-align: inherit !important;
        border-radius: inherit !important;
        -webkit-box-shadow: inherit !important;
        -moz-box-shadow: inherit !important;
        box-shadow: inherit !important;
    }
input,
.form-field, textarea {
    margin: 15px 0;
    padding: 10px;
    width: 100%;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-family: 'Roboto Condensed', arial !important;
    font-size: 14px;
}
    input::placeholder {
        /*font-family: 'Roboto',sans-serif;*/
        font-family: 'Roboto Condensed', arial !important;
    }
    textarea::placeholder {
        /*font-family: 'Roboto',sans-serif;*/
        font-family: 'Roboto Condensed', arial !important;
        font-size: 14px;
        padding: 5px;
    }
input:focus,
select:focus{
 outline-color: coral;
}
button {
    color: #fff !important;
    border-radius: 8px;
    border: 0px;
    background: #F6600B;
    padding: 9px 15px;
    cursor: pointer;
    margin: 11px !important;
    width: 155px;
    height: 35px;
}
button.gallery{
    margin: inherit;
    width: inherit;
}
button.gallery:not(.btn-delete){
    background: #414042;
}
a.cancel {
    border-radius: 8px;
    padding: 9px 15px;
    cursor: pointer;
    margin: 20px;
    text-decoration: none;
    font-size: 14px;
    width: 150px;
    display: inline-block;
    text-align: center;
    height: 35px;
}
button:hover{
 opacity: 0.8;
}
/*multiple select form*/
.multiselect {
  width: 100%;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
 border:none;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.checkboxes {
 display: none;
 text-align: left;
  margin-top: 15px;
}

.checkboxes label {
    display: block;
    margin: 10px 0;
    font-size: 14px;
}

    .checkboxes label:hover {
        color: #F6600B;
    }
.checkboxes input{
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    width: auto;
    margin-right: 10px !important;
}
.fields-container{
 display: flex;
}
.filter-form{
 width: 70%;
 text-align: left;
 background-color: #fff;
}
.filter-form button{
 margin-left: 0;
}
.flex-box{
 width: 40%;
}
.flex-box:first-child{
    margin-left: 10%;
    margin-right: 5%;
}
.flex-box:last-child {
    margin-left: 5%;
    margin-right: 10%;
}
#main-page #main-container,
#demo-requests-page #main-container,
#new-demo-request #main-container{
 padding: 2% 0;
}
#main-page #content,
#demo-requests-page #content,
#new-demo-request #content{
 padding:0 10%;
}
#main-page .multiselect
{
 margin-bottom:0!important;
}
#demoDeadline {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    background-color: #fafafa;
    border-color: #e6e6e6;
}
.buttons-menu {
    width: auto;
    text-align: center;
    display: flex;
    justify-content: center;
}
.buttons-menu button{
 background: #414042;
}
.grid-item.header, #flip-scroll th, #flip-scroll1 th {
    background: #F6600B;
    color: #fff;
}
    .grid-item.header a, #flip-scroll th a, #flip-scroll1 th a {
        color: #fff;
        text-decoration: none;
    }

#demo-requests-page #main-container,
#new-demo-request #main-container
{
 text-align: center;
}
#demo-requests-page  .flex-container input{
 width:40%;
}
#demo-requests-page  .flex-container button{
 background:#414042;
}
.demo-status{
 grid-column-start: 1;
 grid-column-end: 12;
 background-color: #fff!important;
}
.demo-change-status {
    grid-column-start: 12;
    grid-column-end: 13;
    /*background-color: #fff!important;*/
}
.demo-change-designer{
    grid-column-start: 12;
    grid-column-end: 13;
    /*background-color: #fff!important;*/
}
.demo-status b {
    color: #F6600B;
}
.demo-change-status select{
     padding: 5px 15px;
    border-radius: 8px;
    border: 1px solid #dadce0;
    font-size: 14px;
}
.demo-change-designer select {
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #dadce0;
    font-size: 14px;
    max-width: 160px;
}
#new-demo-request form{
 text-align: center;
}
#new-demo-request .fields-container {
    display: block;
    width: 80%;
    margin: 0 auto;
}

#new-demo-request .fields-container textarea{
    width: 100%;
    height: 150px;
    border: 1px solid #dadce0;
    border-radius: 8px;
}
.fields-container p{
 font-size: 14px;
 font-weight: 300;
 margin-left:17px;
 text-align: left;
}
.cancel {
    background: #fff;
    border: 1px solid #F6600B;
    color: #F6600B;
}
#anchorRegister {
    color: #F6600B;
    border-radius: 8px;
    border: solid 1px #F6600B;
    background: #fff;
    padding: 9px 15px;
    cursor: pointer;
    margin: 20px;
    text-decoration: none;
    width: 155px;
    height: 35px;
    display: inline-block
}
/*login*/
.form-inline {
    width: inherit !important;
    padding: 0px;
    margin: 0px;
    border: inherit !important;
    box-shadow: inherit !important;
    -webkit-box-shadow: inherit !important;
}
#btnLogout {
    padding: 0px;
    background-color: transparent;
    margin: 15px;
    font-size: 14px;
    width: inherit;
    height: inherit;
    line-height:20px;
}
.rightLog{
    float: right;
}
.rightLog a{
    float: left;
    text-decoration: none;
    float: left;
}
.rightLog form {
    float: left;
}
body button, body input{
    font-family: 'Roboto Condensed', arial !important;
    font-size: 14px;
}
.expand {
    display: none;
}
input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #aaa;
    margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"]:valid:before {
    content: "";
}
input[type="date"] {
    -webkit-appearance: none;
    -moz-appearance: none;
}
.clearPH {
    content: "" !important;
}
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url("../images/loader.gif") 50% 50% no-repeat transparent;
    display: none; /* unless overriden by jQuery */
}
.autosaveLoader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: url("../images/loader.gif") 50% 50% no-repeat transparent;
    display: none; /* unless overriden by jQuery */
}

.autosaveLoader p{
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.uploading{
    width: 50px;
}
.uploading img {
    display: block;
    width: 50%;
    height: 50%;
}
/*input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}

input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}*/
@media all and (max-width: 767px) {
    .filter-form{
        width: 100%;
    }
    .flex-box {
        width: 100%;
        margin-left: 5% !important;
        margin-right: 5% !important;
    }
    .fields-container {
        flex-direction: column;
        width: 90%;
    }
    .grid-container {
        grid-template-columns: auto auto !important;
    }
    #demo-requests-page .flex-container input {
        width: 100%;
    }
    .menu {
        max-width: 100%;
    }
    .left{
        width: 40%;
    }
    .rightLog {
        width: 60%;
    }
    .rightLog a{
        width: 60%;
    }
    .rightLog form{
        width: 40% !important;
    }
    form {
        width: 80%;
    }
}

@media all and (min-width: 768px) and (max-width: 991px) {
    .filter-form {
        width: 100%;
    }

    .grid-container {
        grid-template-columns: auto auto auto auto auto auto !important;
    }

    #demo-requests-page .flex-container input {
        width: 100%;
    }
    form {
        width: 70%;
    }
}

@media all and (min-width: 992px) and (max-width: 1199px) {
    .filter-form {
        width: 100%;
    }
    form{
        width: 60%;
    }
}

@media only screen and (max-width: 800px) {
    #flip-scroll .grid-buttons br{
        display: block;
    }
    #flip-scroll .cf:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    #flip-scroll * html .cf {
        zoom: 1;
    }

    #flip-scroll *:first-child + html .cf {
        zoom: 1;
    }

    #flip-scroll table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }

    #flip-scroll th,
    #flip-scroll td {
        margin: 0;
        vertical-align: top;
    }

    #flip-scroll th {
        text-align: left;
    }

    #flip-scroll table {
        display: block;
        position: relative;
        width: 100%;
    }

    #flip-scroll thead {
        display: block;
        float: left;
    }

    #flip-scroll tbody {
        display: block;
        width: auto;
        position: relative;
        overflow-x: auto;
        white-space: nowrap;
    }

    #flip-scroll thead tr {
        display: block;
    }

    #flip-scroll th {
        display: block;
        text-align: right;
    }

    #flip-scroll tbody tr {
        display: inline-block;
        vertical-align: top;
    }

    #flip-scroll td {
        display: block;
        text-align: left;
        min-height: 47px;
    }
    #flip-scroll th.actions{
        height: 104px;
    }
    #flip-scroll th.status, #flip-scroll td.status {
        height: 77px;
    }
    .colName{
        display: inline;
        width: 50%;
        float: left;
    }
    .colVal {
        display: inline;
        width: 50%;
        float: left;
    }
    .fifth {
        width: 20%;
    }
    .none{
        display: none;
    }
}
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    @media {
        /*
      Define here the CSS styles applied only to Safari browsers
      (any version and any device)
     */
    }
}

.header {
    text-align: center !important;
}

.filters {
    text-align: left;
    border: 1px solid;
    border-radius: 10px;
    height: 90px;
    width: 375px;
    display: inline-block
}

.links {
    text-align: left;
    border: 1px solid;
    border-radius: 10px;
    width: 763px;
    display: inline-block
}

.filter-form-bvidTag {
    width: 830px;
    text-align: center;
    background-color: #fff;
}

#experienceTags input {
    margin: auto;
    width: auto;
}

div.checklistContainer {
    background: white !important;
    border: none !important;
}

#popupRequestsExportExcel {
    display: none; 
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

#popupRequestsExportExcel .modal-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
}

#popupRequestsExportExcel .modal-content {
    background-color: #fefefe;
    margin: 10% auto 0;
    padding: 20px;
    border: 1px solid #888;
    width: 30%;
}

#popupRequestsExportExcel .modal-title{
    font-size: 24px;
    margin-top: 0;
}

#popupRequestsExportExcel .close {
    color: black !important;
    float: right;
    font-size: 28px;
    font-weight: bold;
    width: fit-content;
    margin: 0;
    height: fit-content;
    background: transparent;
    padding: 0;
}
s
#popupRequestsExportExcel .close:hover,
#popupRequestsExportExcel .close:focus {
    text-decoration: none;
    cursor: pointer;
}

#popupRequestsExportExcel .export-btn-wrap{
    display: flex;
    justify-content: flex-end;
}

#popupRequestsExportExcel .export-btn {
    margin-right: 0;
}

#popupRequestsExportExcel .export-btn.disabled {
    opacity: 0.8;
    pointer-events: none;
    cursor: initial;
}

#previewImg {
    position: absolute;
    min-height: 362px;
    align-items: flex-end;
    z-index: 99;
}

#previewImg p, #previewImg img{
    display: none;
    border: 1px solid #414042;
}

#previewImg p {
    background: white;
    padding: 30px;
    margin: 0;
}

#demo-requests-page .grid-buttons button:not(.btn-delete) {
    background: #414042;
}

button.primaryBtn, a.primaryBtn{
    color: white !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: #ff5200 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    width: 200px !important;
    height: 55px !important;
    font-size: 20px !important;
}

button.primaryBtn:active,
button.primaryBtn:focus,
button.primaryBtn:focus-visible,
button.primaryBtn:focus-within,
a.primaryBtn:active,
a.primaryBtn:focus,
a.primaryBtn:focus-visible,
a.primaryBtn:focus-within{
    outline: 1px solid black !important;
}

button.primaryBtn:hover,
a.primaryBtn:hover{
    opacity: 0.8 !important;
}

button.primaryBtn.disabled,
a.primaryBtn.disabled{
    opacity: 0.5 !important;
    cursor: initial !important;
    pointer-events: none !important;
}

button.secondaryBtn,
a.secondaryBtn{
    color: white !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: #444444 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    width: 200px !important;
    height: 55px !important;
    font-size: 20px !important;
}

button.secondaryBtn:hover,
a.secondaryBtn:hover{
    opacity: 0.8 !important;
}

button.secondaryBtn:active,
button.secondaryBtn:focus,
button.secondaryBtn:focus-visible,
button.secondaryBtn:focus-within,
a.secondaryBtn:active,
a.secondaryBtn:focus,
a.secondaryBtn:focus-visible,
a.secondaryBtn:focus-within{
    outline: 1px solid black !important;
}

button.secondaryBtn.disabled,
a.secondaryBtn.disabled{
    opacity: 0.5 !important;
    cursor: initial !important;
    pointer-events: none !important;
}

button.tertiaryBtn, a.tertiaryBtn, input[type="button"].tertiaryBtn{
    color: black !important;
    border-radius: 8px !important;
    border: 1px solid black !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    width: 200px !important;
    height: 55px !important;
    font-size: 20px !important;
}

button.tertiaryBtn:hover,
a.tertiaryBtn:hover,
input[type="button"].tertiaryBtn:hover{
    background: #e6e6e6 !important;
    opacity: 1 !important;
}

button.tertiaryBtn:active,
button.tertiaryBtn:focus,
button.tertiaryBtn:focus-visible,
button.tertiaryBtn:focus-within,
a.tertiaryBtn:active,
a.tertiaryBtn:focus,
a.tertiaryBtn:focus-visible,
a.tertiaryBtn:focus-within,
input[type="button"].tertiaryBtn:active,
input[type="button"].tertiaryBtn:focus,
input[type="button"].tertiaryBtn:focus-visible,
input[type="button"].tertiaryBtn:focus-within {
    outline: 1px solid black !important;
}

button.tertiaryBtn.disabled,
a.tertiaryBtn.disabled,
input[type="button"].tertiaryBtn.disabled{
    opacity: 0.5 !important;
    cursor: initial !important;
    pointer-events: none !important;
}

.grid-buttons button.primaryBtn,
.grid-buttons a.primaryBtn,
.grid-buttons button.secondaryBtn,
.grid-buttons a.secondaryBtn,
.grid-buttons button.tertiaryBtn,
.grid-buttons a.tertiaryBtn,
.filter-form button.primaryBtn,
.filter-form a.primaryBtn,
.filter-form button.secondaryBtn,
.filter-form a.secondaryBtn,
.filter-form button.tertiaryBtn,
.filter-form a.tertiaryBtn,
.filter-form input[type="button"].tertiaryBtn,
.filter-form-bvidTag button.primaryBtn,
.filter-form-bvidTag a.primaryBtn,
.filter-form-bvidTag button.secondaryBtn,
.filter-form-bvidTag a.secondaryBtn,
.filter-form-bvidTag button.tertiaryBtn,
.filter-form-bvidTag a.tertiaryBtn,
#flip-scroll1 button.primaryBtn,
#flip-scroll1 a.primaryBtn,
#flip-scroll1 button.secondaryBtn,
#flip-scroll1 a.secondaryBtn,
#flip-scroll1 button.tertiaryBtn,
#flip-scroll1 a.tertiaryBtn,
button.smallPrimaryBtn{
    height: 35px !important;
    width: 155px !important;
    font-size: 14px !important;
    display: inline-flex;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    margin-right: 5px !important;
}

.filter-form .finalBtns button.primaryBtn,
.filter-form .finalBtns a.primaryBtn,
.filter-form #finalBtns button.primaryBtn,
.filter-form #finalBtns a.primaryBtn,
.filter-form .finalBtns button.secondaryBtn,
.filter-form .finalBtns a.secondaryBtn,
.filter-form #finalBtns button.secondaryBtn,
.filter-form #finalBtns a.secondaryBtn,
.filter-form .finalBtns button.tertiaryBtn,
.filter-form .finalBtns a.tertiaryBtn,
.filter-form #finalBtns button.tertiaryBtn,
.filter-form #finalBtns a.tertiaryBtn,
#newsletterForm button.primaryBtn,
#newsletterForm a.primaryBtn,
#newsletterForm button.secondaryBtn,
#newsletterForm a.secondaryBtn,
#newsletterForm button.tertiaryBtn,
#newsletterForm a.tertiaryBtn,
#result-section button.primaryBtn,
#result-section a.primaryBtn,
#result-section button.secondaryBtn,
#result-section a.secondaryBtn,
#result-section button.tertiaryBtn,
#result-section a.tertiaryBtn{
    width: 200px !important;
    height: 55px !important;
    font-size: 20px !important;
}

a.primaryLink {
    color: #ff5200 !important;
    text-decoration-color: #ff5200 !important;
    font-weight: bold !important;
    outline: none !important;
    border: none !important;
}

a.primaryLink:hover{
    color: #cc4201 !important;
    text-decoration-color: #cc4201 !important;
}

a.primaryLink.disabled{
    opacity: 0.5 !important;
    cursor: initial !important;
    pointer-events: none !important;
}

a.primaryLink:focus,
a.primaryLink:focus-visible,
a.primaryLink:focus-within{
    text-decoration-style: double !important;
}

.buttons-col button img {
    width: 20px;
    height: auto;
    margin: 0px 8px 0 10px;
}

.buttons-menu button {
    padding: 0;
    width: 190px;
    height: 39px;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.buttons-col {
    display: flex;
    flex-direction: column;
}

.buttons-menu a {
    text-decoration: none !important;
}

.back-btn{
    display: block;
    width: fit-content;
}

.back-btn button{
    background: transparent !important;
    padding: 0 !important;
    width: fit-content !important;
    color: black !important;
    font-size: 17px;
    display: flex;
    align-items: center;
    margin: 0 !important;
}

.back-btn button img{
    transform: rotate(90deg);
    width: 20px;
    margin: 0 0 0 5px;
}

.buttons-menu p{
    line-height: 39px;
    padding: 0;
    margin: 0;
}

#messageBox {
    margin-top: 16px;
}