:root{
    --color1: #692cff;
    --color2: #f68e56;
    --gray1: #f1f2f9;
    --gray2: #dadce8;
    --gray3: #a19fc0;
    --borderRadius: 6px;
    --boxShadow1: 0 1px 1px 0 rgb(66 66 66 / 5%), 0 1px 3px 1px rgb(66 66 66 / 5%);
    --boxShadow2: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
    --boxShadow3: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
    --boxShadow4: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
    --adminBgDeg: 10deg;
    --crdWidth: calc((100% / 3) - 20px);
}

body{
    max-width: 100vw;
    overflow-x: hidden;
    min-height: 100%;
    margin: 0;
    accent-color: var(--color1);
    font-family: 'Quicksand', sans-serif;
    font-family: 'Poppins', sans-serif;
    /*box-shadow: 0 0 50px 5px rgb(0 0 0 / 10%);*/
}
.template{
    display: none !important;
}
h2, h3{
    margin: 0;
    font-weight: 600;
}
h3{
    color: #a19fc0;
    font-size: 14px;
    /*font-weight: normal;*/
}
.verticalBarRightContent h3{
    font-size: 24px;
    margin-bottom: 10px;
}
template{
    display: none !important;
}
.crd h3{
    font-size: 14px;
    font-weight: bold;
}
.crd h4{
    font-size: 24px;
    margin: 10px 0;
    font-weight: bold;
    margin-bottom: 0;
}
.main{
    display: flex;
    height: 100%;
    min-height: 100vh;
}

.verticalBarLeft{
    width: 265px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 45px 0 45px 55px;
    padding: 45px 0 45px 45px;
    /* mozilla nem szereti... elromlott tőle a /settings/colors */
    /*position: sticky;*/
    top: 0;
    height: 100vh;
}

.logo{
    margin-bottom: 80px;
    margin-bottom: 55px;
    font-family: 'Archivo Black', sans-serif;
}

.verticalBarLeft ul{
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 400;
}
.verticalBarLeft ul li{
    margin-bottom: 28px;
    padding: 5px 0;
    position: relative;
}
.verticalBarLeft ul li.current a,
.verticalBarLeft ul li a:hover{
    color: #540fff;
}
.verticalBarLeft ul li a{
    color: #000;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.verticalBarLeft ul li a span.alert{
    background-color: var(--color2);
    color: #fff;
    border-radius: 200px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}
.verticalBarLeft ul li.current:after{
    content: '';
    width: 5px;
    height: 100%;
    background-color: #540fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    position: absolute;
    top: 0;
    right: 0;
}
.verticalBarLeft ul li i {
    width: 30px;
}
.designAdminSidebar .verticalBarLeft{
    padding: 0;
    width: 100%;
    height: auto;
}
.middle{
    background-color: var(--gray1);
    flex: 1;
    box-sizing: border-box;
    padding: 45px 35px;
    padding-bottom: 0;
}
.middle.isAjax{
    height: auto;
    padding: 20px;
}
.cards{
    margin-top: 35px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.crd{
    background-color: #fff;
    border-radius: 12px;
    padding: 35px 25px;
    width: var(--crdWidth);
    box-sizing: border-box;
    margin-bottom: 30px;
    box-shadow: var(--boxShadow1);
    display: flex;
    justify-content: space-between;
}
.crdWidth{
    width: var(--crdWidth);
}
.crdDoubleWidth{
    width: calc((100% / 3 - 20px) * 2 + 30px);
}
.double, .crd.double{
    width: calc((100% / 3 - 20px) * 2 + 30px);
}
.fullwidth,
.crd.fullwidth{
    width: 100%;
}
.crd.half, .half{
    width: calc((100% / 2) - 15px);
}
.crd.table{
    /*padding: 0;*/
}
.crd.quarter{
    width: calc((100% / 4) - 20px);
}
.crd.placeholder{
    height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
    margin-bottom: 0;
}
.crd.simpleData{
    padding: 25px;
    align-items: center;
    justify-content: space-between;
}
.verticalBarRight{
    width: 450px;
    padding: 45px 30px;
    background-color: #fff;
    box-sizing: border-box;
}
.verticalBarRightHeader{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.verticalBarRightHeader i{
    font-size: 16px;
}
.verticalBarRightHeader a{
    margin-left: 25px;
    color: #000;
    cursor: pointer;
}
.progress-ring__circle {
    transition: 0.5s stroke-dashoffset;
    transition-delay: 0.4s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    /*troke-dasharray: 245.044, 245.044;
    stroke-dashoffset: 245.044px;*/
}
.progress-ring {
    display: block;
}
.adminSearchForm{
    display: flex;
}
.adminSearchForm button{
    background-color: var(--color1);
    border: 0;
    color: #fff;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}
.adminSearchForm input{
    background-color: #e2e6f9;
    border: 0;
    padding-left: 22px;
    height: 50px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 350px;
    margin-right: -8px;
    outline: 0;
    padding-right: 22px;
}
.adminSearchForm.small button{
    width: 40px;
    height: 40px;
}
.adminSearchForm.small input{
    height: 40px;
    width: 300px;
}
.middleHeader{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.adminSearchForm input.noButton{
    border-radius: 8px;
}
.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 45px;
}
.svgLogo{
    width: 35px;
    height: 50px;
}
.svgLogo path{
    fill-rule: evenodd;
}
@keyframes logoSlide1{
  from { transform: translate(66%, 66%); }
  to { transform: translate(0, 0); }
}
@keyframes logoSlide2{
  from { ransform: translate(-88%, -88%); }
  to { transform: translate(0, 0); }
}
@keyframes logoFlip{
    from { 
        transform: rotate(-86deg) rotateY(-180deg);
        fill: #f68e56;
    }
    to { 
        transform: translate(0, 0);
        fill: var(--color1);
    }
}
.cls-2{
    transform: translate(-88%, -88%);
    animation-name: logoSlide2;
    animation-duration: 400ms;
    animation-delay: 100ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
.cls-1 {
    transform: translate(66%, 66%);
    animation-name: logoSlide1;
    animation-duration: 400ms;
    animation-delay: 100ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
.userPic{
    width: 117px;
    height: 117px;
    border-radius: 100%;
    background-color: var(--gray1);
    margin: 0 auto 40px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
}
.realName{
    font-size: 1.3em;
}
.verticalBarRightContent{
    margin-top: 25px;
}
.button{
    height: 40px;
    line-height: 40px;
    padding: 0 22px;
    background-color: var(--color1);
    border-radius: var(--borderRadius);
    color: #fff;
    display: inline-block;
    font-size: 14px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    outline: 0;
    transition: color 200ms, background-color 200ms;
}
.button.light{
    background-color: var(--gray1);
    color: #000;
}
.button.square{
    width: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button:not(.square) i{
    margin-right: 5px;
}
.button[disabled],
.button.disabled{
    background-color: var(--gray2);
    color: var(--gray3);
    cursor: default;
}
.button.white{
    background-color: #fff;
    color: #000;
    box-shadow: var(--boxShadow1);
}
.button.two{
    background-color: var(--color2);
}
.font_details p{
    margin: 0;
    margin-bottom: 20px;
}
.font_details hr{
    background-color: var(--gray1);
    height: 2px;
    border: 0;
}
.fontPreview{
    border-right: 2px solid #f1f2f9;
    padding-right: 25px;
    margin-right: 25px;
}
#toUpload{
    margin-right: 15px;
    cursor: pointer;
    font-size: 14px;
}
.filePreviewBoxContainer{
    display: flex;
    align-items: center;
}
.filePreviewBox{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--gray1);
    height:100px;
    width: 100px;
    border-radius: var(--borderRadius);
    font-size: 1.5em;
    overflow: hidden;
    margin-right: 20px;
}
.fileDetails{
    font-size: 12px;
}
.textEllipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.progress{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    height: 8px;
    border-radius: var(--borderRadius);
    border: 1px solid var(--gray1);
    overflow: hidden;
    box-sizing: border-box;
}
.progress-bar{
    background-color: var(--color1);
}

.uploadProgressLayer{
    height: 125px;
    position: absolute;
    width: 1%;
    left: 0;
    overflow: hidden;
}
.fileEdit .filename{
    text-align: center;
}
.fileEdit .filename i{
    margin-left: 10px;
    color: #000;
}
.tesztInput,
.adminForm input:not([type=radio]):not([type=checkbox]):not([type=range]):not(.button),
.adminForm textarea,
.adminForm select{
    height: 40px;
    line-height: 38px;
    padding: 1px 22px;
    border: 1px solid var(--gray2);
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    outline: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    width: 100%;
    margin-bottom: 10px;
    transition: border-color 200ms;
}
.adminForm select[size]{
    height: auto;
    min-height: 40px;
    padding: 5px 0;
}
.adminForm select[size] option{
    padding: 4px 22px;
}
.adminForm select[size] option.hidden{
    display: none;
}
.adminForm select[size].slideToggle{
    min-height: 0;
}
.tesztInput:focus,
.adminForm input:not([type=radio]):not([type=checkbox]):not(.button):focus,
.adminForm textarea:focus{
    border: 1px solid var(--color1);
}
textarea.tesztInput,
.adminForm textarea{
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
    line-height: 1.8em;
    padding-top: 10px;
    padding-bottom: 10px;
}
.txts .adminForm textarea{
    min-height: 200px;
    max-height: 500px;
}
.adminForm input[readonly]{
    cursor: default;
    border-style: dashed !important;
}
.adminForm input[readonly]:focus{
    border-color: var(--gray2) !important;
}
.adminForm .customRange input[type=range]{
    border: 1px solid var(--gray2);
    padding-left: 5px;
    padding-right: 5px;
}
.adminForm .toggleShowContainer{
    margin-bottom: 10px;
}

.redOnHover:hover{
    /*background-color: red !important;*/
    background-color: #ff2c2c !important;
    color: #fff !important;
}

.fad.fa-file-pdf:before,
.fa-duotone.fa-file-pdf:before{
    color: #b30b00;
}
.fad.fa-file-excel:before,
.fa-duotone.fa-file-excel:before{
    color: #1e6c42;
}
.fad.fa-file-word:before,
.fa-duotone.fa-file-word:before{
    color: #2a5699;
}

.crd.table table{
    width: 100%;
    text-align: center;
    font-size: 14px;
    padding: 0;
}
.crd.table table th{
    padding: 0 0 18px 0;
    border-bottom: 1px solid var(--gray2);
}
.crd.table table tbody tr td{
    padding: 5px 0;
    padding: 0;
}
.crd.table table tbody tr:first-of-type td{
    padding-top: 20px;
}
.crd.table table td.tdMinWidth{
    width: 1%;
    white-space: nowrap;
}
.editButtons{
    opacity: 0;
    transition: opacity 200ms;
}
.crd.table table tbody tr:hover .editButtons{
    opacity: 1;
}
/* switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.switchSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray2);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}
.switchSlider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .switchSlider {
    background-color: var(--color1);
}
input:checked + .switchSlider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
/* /switch */

.multiToggle{
    height: 40px;
    line-height: 40px;
    border-radius: var(--borderRadius);
    border: 1px solid var(--gray2);
    font-size: 12px;
    display: flex;
    overflow: hidden;
    text-transform: uppercase;
    background-color: #fff;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.multiToggle input{
    display: none;
}
.multiToggle label{
    cursor: pointer;
    flex: 1;
    text-align: center;
}
.multiToggle span{
    display: block;
    padding: 0 20px;
    background-color: transparent;
    transition: background-color 200ms, color 200ms;
    white-space: nowrap;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.multiToggle input:checked + span{
    background-color: var(--color1);
    color: #fff;
}
.multiToggle.gray input:checked + span{
    background-color: var(--gray2);
    color: #000;
}
.multiToggle.small{
    height: 32px;
    line-height: 32px;
}
.multiToggle.small span{
    padding: 0 12px;
    font-size: 12px;
}
.multiToggle i{
    font-size: 18px;
    font-size: 16px;
    /*margin-right: 10px;*/
    line-height: 40px;
}
.multiToggle.small i{
    font-size: 12px;
    line-height: 30px;
}

.adminSortBar{
    margin-top: 30px;
    margin-bottom: -15px;
    padding: 10px;
}
.adminPager{
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px;
}
.adminPagerNumbers a{
    margin: 0 5px;
}
.numberOfResults{
    margin-bottom: 0 !important;
    width: 80px !important;
    text-align: center;
    padding: 0 !important;
    border-radius: 6px !important;
}
.crd.table table tbody tr td.fileName{
    padding-left: 14px;
}
.table .fileName a{
    color: #000;
    text-decoration: none;
}
.crd.table table.pagesList{
    text-align: left;
}
.pagesList tr:nth-of-type(2n) {
    background-color: #f1f2f9;
}
.pagesList .isPublic{
    text-align: center !important;
}

/**/
details.custom-select{
    position: relative;
    width: 200px;
    margin-right: 1rem;
    font-size: 14px;
}
details[open].custom-select{
    z-index: 1;
}
.custom-select summary{
    cursor: pointer;
    border-radius: var(--borderRadius);
    /*background-color: var(--gray1);*/
    border: 1px solid;
    border-color: var(--gray2);
    list-style: none;
    height: 40px;
    line-height: 40px;
    padding: 0 22px;
    background-color: #fff;
    position: relative;
}
.custom-select summary .summaryOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
/*.custom-select summary::-webkit-details-marker,*/
.custom-select summary::marker{
    display: none;
}
details[open].custom-select summary:before {
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
}
details[open].custom-select summary{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select summary:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-bottom: 1px solid currentColor;
    border-left: 1px solid currentColor;
    border-bottom-left-radius: 2px;
    transform: rotate(45deg) translate(50%, 0%);
    transform-origin: center center;
    transition: transform ease-in-out 100ms;
    position: absolute;
    top: calc(50% - .5rem);
    right: 22px;
}
.custom-select summary:focus{
    outline: none;
}
details[open].custom-select summary:after{
    transform: rotate(-45deg) translate(0%, 0%);
}
.custom-select ul{
    width: 100%;
    background: #fff;
    position: absolute;
    /*top: calc(100% + .5rem);*/
    top: 100%;
    left: 0;
    /*padding: 1rem;*/
    padding: 0 22px;
    margin: 0;
    box-sizing: border-box;
    border-radius: var(--borderRadius);
    max-height: 225px;
    overflow-y: auto;
    border: 1px solid var(--gray2);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.custom-select li{
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--gray2);
    list-style: none;
    line-height: 40px;
}
.custom-select li:first-child {
    padding-top: 0;
}
.custom-select li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* FAKE SELECT */
.custom-select summary.radios{
    counter-reset: radios;
}
.custom-select input[type=radio]{
    counter-increment: radios;
    appearance: none;
    display: none;
    font-family: 'Poppins', sans-serif;
}
.custom-select input[type=radio]:checked {
    display: inline;
}
.custom-select input[type=radio]:after {
    content: attr(title);
    display: inline;
}
.custom-select ul.list {
    counter-reset: labels;
}
.custom-select label {
    width: 100%;
    display: block;
    cursor: pointer;
    transition: padding-left 100ms;
}
.custom-select label:hover {
    padding-left: 6px;
}
/**/
/* googleSnippet */
.googleSnippet{
    font-family: arial,sans-serif;
    font-size: 14px;
    position: relative;
    width: 600px;
    max-width: 600px;
    cursor: default;
}
.googleSnippet h3 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
.googleSnippet .gTitle{
    padding-top: 4px;
    padding-top: 5px;
    display: inline-block;
    line-height: 1.3;
    margin-bottom: 3px;
    color: #1a0dab;
}
.gCiteSpan{
    color: #5f6368;
}
.gCite{
    padding-top: 1px;
    font-size: 14px;
    line-height: 1.3;
}
.googleSnippet cite, .googleSnippet cite a:link, .googleSnippet cite a:visited {
    color: #202124;
    font-style: normal;
}
.gMdesc{
    max-width: 48em;
    max-width: 672px;
    color: #4d5156;
    line-height: 1.58;
}
.gMdescInner {
    line-height: 1.58;
    word-wrap: break-word;
}
.gMdescInner em, .googleSnippet .st em {
    color: #5f6368;
}
.googleSnippet em{
    font-weight: bold;
    font-style: normal;
}
.gBread{
    position: absolute;
    left: 0;
    top: 0;
}
/* /googleSnippet */

/* fbSnippet */
.fbSnippet{
    width: 680px;
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999))) / 8px;
}
.fbSnippet *{
    font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.fbHeader{
    padding-top: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
    display: flex;
    padding-right: 16px;
    padding-left: 16px;
    flex-direction: row;
}
.fbPageImg{
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background-color: var(--color2);
    margin-right: 8px;
}
.fbPageName{
    flex-grow: 1;
}
.fbPageName .name{
    font-size: 15px;
    font-weight: 600;
    font-family: "Segoe UI Semibold";
}
.fbPageName .publicIcon{
    background-image: url('/img/fb-icons-1.png');
    background-position:0 -639px;
    background-size:auto;
    width:12px;
    height:12px;
    background-repeat:no-repeat;
    display:inline-block;
    -webkit-filter: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
    filter: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
}
.fbPageName .time{
    font-size: 13px;
    color: rgb(101, 103, 107);
}
.fbOptions{
    padding: 8px;
}
.fbOptions i{
    background-image: url('/img/fb-icons-2.png');
    background-position: 0 -561px;
    background-size: auto;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-filter: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
    filter: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
}
.fbPostDesc{
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 4px;
    font-size: 15px;
}
.fbPost{
    border-style: solid;
    border-color: #e5e5e5;
    border-width: 1px 0 1px 0;
}
.fbPostImg{
    width: 100%;
    padding-top: 52.2%;
    background-size: 100% auto;
    background-position: center center;
}
.fbPostMeta{
    background-color: #f0f2f5;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
}
.fbWebsite{
    text-transform: uppercase;
    font-size: 13px;
    color: #65676b;
}
.fbTitle{
    color: #050505;
    font-family: 'Segoe UI Semibold';
    font-size: 17px;
    font-weight: 600;
    margin: 5px 0;
    max-height: 44px;
    overflow: hidden;
}
.fbDesc{
    font-size: 15px;
    color: #65676b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fbLikes{
    margin: 0 16px;
    padding: 12px 0;
    border-bottom: 1px solid #ced0d4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #65676b;
    font-size: 15px;
}
.fbLikes div{
    display: flex;
    align-items: center;
}
.fbLikes img{
    display: block;
    margin-right: 8px;
}
.fbActions{
    height: 45px;
}
/* /fbSnippet */
/*@property --deg{
    syntax: '<angle>';
    inherits: false;
    initial-value: 10deg;
}*/
.adminLoginContainer{
    width: 100%;
    background: linear-gradient(var(--adminBgDeg), #692cff, #f68e56);
    /*animation: admin-bg 10s infinite linear;*/
}
.sysAdminLoginContainer{
    background: linear-gradient(var(--adminBgDeg), #fafafa, #222222);
}
.loginErrorMsg:empty{
    margin: 0;
    height: 0;
    padding: 0;
}
.loginErrorMsg{
    margin-bottom: 0;
    color: red;
    margin-top: 8px;
    font-size: 14px;
}

/*@keyframes admin-bg{
    from{
        --deg: 10deg;
    }
    to{
        --deg: 300deg;
    }
}*/
.adminLoginContainer .crd{
    padding: 35px 70px;
}
.adminLoginContainer form{
    width: 350px;
    margin-top: 10px;
}
.whiteLogo{
    filter: grayscale(1) brightness(4) drop-shadow(1px 1px 3px rgba(0,0,0,.4));
}
.fonts .crd h4{
    margin-top: 0;
    margin-bottom: 0;
}
.fonts [data-fontid] hr{
    width: 100%;
    color: #ccc;
    background: #f1f2f9;
    border: 0;
    height: 2px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.middle, .verticalBarRight{
    height: 100vh;
    overflow: auto;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
    /*background: var(--gray1);*/
}
::-webkit-scrollbar-thumb {
  background: #dadce8;
  background: #a19fc0; 
  background: #dcdde2;
  /*border-radius: 6px;*/
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #a19fc0; 
  background: #dadce8;
  background: #8c8aa2;
}

.designAdminSidebar{
    width: 400px;
    background-color: #fff;
    box-sizing: border-box;
    position: fixed;
    top: -30px;
    left: 0;
    height: calc(100vh + 30px);
    opacity: .97;
    box-shadow: var(--boxShadow1);
    z-index: 995;
    transition: left 500ms, top 500ms, box-shadow 300ms, opacity 500ms;
    /*overflow: visible !important;*/
    padding-top: 30px;
}
.designAdminSidebarInner{
    padding: 45px 20px;
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    overflow: auto;
}
body.sorting .designAdminSidebar,
.designAdminSidebar:not(.open){
    left: -405px;
}

.designAdminSidebar .material-circle-button.fab{
    background-color: #fff;
    bottom: auto;
    top: 50%;
    transform: translate(-10%, -50%);
    left: 100%;
    font-size: 18px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    z-index: -1;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.designAdminSidebar .material-circle-button.fab i{
    color: var(--color1);
    transition: transform 500ms;
}
.designAdminSidebar .material-circle-button.fab i.fad:after,
.designAdminSidebar .material-circle-button.fab i.fa-duotone:after{
    opacity: 1;
    color: var(--color2);
}
.designAdminSidebar.open .fab i{
    transform: rotateZ(180deg);
}
/*.designAdminSidebar .accordion h3{
    margin-top: 16px;
    margin-bottom: 8px;
    cursor: pointer;
}/**/
.sortableLists{
    margin-top: 0;
}
.sortableListHint{
    border: 1px dashed var(--color1);
    background-color: transparent !important;
    box-sizing: border-box;
}
.sortableListPlaceholder{
    border: 1px dashed #f68e56;
    background-color: transparent !important;
    box-sizing: border-box;
}
.sortableListOpener{
    position: absolute;
    left: 18px;
    padding: 2px;
    color: #fff;
    cursor: pointer;
}
.sortableLists .linkUrlPreview,
#s-l-base .linkUrlPreview{
    color: var(--gray3);
    font-size: .7em;
    margin-left: 15px;
    text-decoration: none;
}
::-moz-selection { /* Code for Firefox */
    color: #000;
    background: var(--color2);
}
::selection {
    color: #000;
    background: var(--color2);
}

.customNumberInput input{
    width: 80px !important;
    border-radius: 0 !important;
    text-align: center;
    margin-bottom: 0 !important;
}
.customNumberInput .button:first-of-type{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.customNumberInput .button:last-of-type{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.webColor.webColor1{
    background-color: var(--webColor1);
}
.webColor.webColor2{
    background-color: var(--webColor2);
}
.webColor.webColor3{
    background-color: var(--webColor3);
}
.webColor.webColor4{
    background-color: var(--webColor4);
}
.webColor.webColor5{
    background-color: var(--webColor5);
}
.webColor.webColorText{
    background-color: var(--webColorText);
}
.webColorCustomLabel{
    margin-left: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.webColorCustomLabel input{
    height:0 !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden;
    position: absolute;
}
.webColorCustom{
    background-color: var(--color1);
}
.mediaSelector{
    margin-bottom: 10px;
    position: relative;
}
.mediaSelector input{
    display: none !important;
}
.popupBackdrop{
    position: fixed;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: backdrop-filter 300ms, -webkit-backdrop-filter 300ms, background-color 300ms;
    background-color: rgba(0,0,0,0);
    z-index: 998;
}
.popupBackdrop.show{
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: rgba(0,0,0,.1);
}
.popupContent{
    opacity: .1;
    transition: opacity 300ms;
    position: relative;
}
.popupContent.crd{
    max-width: 95%;
    width: 1000px;
    margin-bottom: 0;
}
.popupBackdrop.show .popupContent{
    opacity: 1;
}
.popupMain{
    overflow-y: auto;
    max-height: calc(90vh - 145px);
}
.popupButtons{
    padding-top: 35px;
}
.contentImagePreview{
    height: 0;
    width: 0;
    display: none;
}
.contentImagePreview[src]{
    display: block;
    height: auto;
    width: 100%;
    /*margin-right: 15px;*/
}
.contentImagePreview[src]+button{
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 8;
}
.autocompleteWrapper{
    position: relative;
    margin-bottom: 15px;
}
.autocompleteWrapper .results{
    font-size: 14px;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    width: 100%;
    border: 1px solid var(--color1);
    border-top-style: dashed;
    padding: 0;
    box-sizing: border-box;
    line-height: 40px;
    background-color: #fff;
    border-radius: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /*box-shadow: var(--boxShadow1);*/
    max-height: calc(40px * 6);
    overflow-y: auto;
    z-index: 3;
    display: none;
}
.autocompleteWrapper .results.show{
    display: initial;
}
.autocompleteWrapper .results p{
    margin: 0;
    padding: 0 22px;
    cursor: pointer;
}
.autocompleteWrapper .results p:hover{
    background-color: var(--gray1);
}
#tagsInput:focus {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tagsDisplay{
    display: none;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 10px 0
}
.tagsDisplay.flex{
    display: flex;
}
.tagsDisplay span{
    padding: 3px 20px;
    border-radius: 500px;
    background-color: var(--color1);
    color: #fff;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.tagsDisplay span i{
    margin-left: 8px;
    font-size: 10px;
    cursor: pointer;
    color: var(--gray1);
}
.tagsDisplay.light span,
.tagsDisplay.light span i{
    background-color: #e2e6f9;
    color: #000;
}
.usedFontBlock .tagsDisplay{
    padding-bottom: 0;
    margin-bottom: -5px;
}
.usedFontBlock{
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f2f9;
}
.usedFontBlock:last-of-type{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.progress-ring-container.loading .progress-ring__circle{
    animation-name: ringLoading;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes ringLoading{
    0% {stroke-dashoffset: 245.044;}
    60% {
        stroke-dashoffset: 122.5;
        transform: rotate(90deg);
    }
    100% {
        stroke-dashoffset: 245.044;
        transform: rotate(270deg);
    }
}
.faviconPreviewContainer{
    overflow: hidden;
    margin: 0 auto;
}
.faviconPreview{
    margin-bottom: -30px;
}
.smallerFont{
    font-size: .8em;
}
.formList > div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.formList > div:last-of-type{
    margin-bottom: 0;
}
.twoLineDate{
    /*width: 70px;*/
}
.verticalBarRightContent h2{
    font-size: 1.2em;
    margin-bottom: 20px;
}
.verticalBarRightContent .backButton{
    position: absolute;
    top: 30px;
}
.formRow.selected:after {
    content: '';
    width: 5px;
    height: 100%;
    background-color: #540fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    position: absolute;
    top: 0;
    right: -55px;
}
.formRow.selected{
    position: relative;
}
.sticky0{
    position: sticky;
    top: 0;
}
.hoverParent .showOnParentHover{
    display: none;
}
.hoverParent:hover .showOnParentHover{
    display: block;
}

.formDetails tr.selected{
    position: relative;
}
.formDetails tr.selected:after{
    content: '';
    width: 5px;
    /*height: calc(100% - 20px);*/
    height: 100%;
    background-color: #540fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    position: absolute;
    bottom: 0;
    right: -60px;
    display: block;
}
.positionRelative{
    position: relative;
}
.mailReply{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    color: #000;
    font-size: 14px;
}
.greenText{
    color: green;
}
.redText{
    color: red;
}
i.fad.fa-vial:after{
    color: #692cff;
    opacity: .5;
}
span.separator{
    margin: 0 8px;
}
.popupPreviewContainer, .popupOuter{
    height: 0;
    width: 0;
}
.popupContainer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.4);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
    z-index: 999999;
}
.popupContainer.hidden{
    display: none;
}
.popup{
    position: relative;
    width: 1000px;
    padding: 0 30px 0 0;
    box-sizing: border-box;
    max-width: 100%;
}
.popupClose{
    position: absolute;
    right: 5px;
    top: 0;
    font-size: 20px;
    cursor: pointer;
}
.mediaStockDetails a.authorLink{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    text-decoration: none;
    margin-top: 20px;
}
.unsplashUserImg{
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid var(--gray2);
}
.ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
.fa-spinner-third{
    animation: spinner 500ms infinite
}
@keyframes spinner{
    from{
        transform: rotateZ(0deg)
    }
    to{
        transform: rotateZ(360deg)
    }
}
.fontSize14{
    font-size: 14px;
}
.inputChangeAlert{
    font-size: 12px;
    display: none;
    color: red;
    padding: 6px 0;
}
.fileDetailsTable{
    font-size: 14px;
    width: 100%;
    margin-bottom: 20px;
}
.fileDetailsTable tr:nth-of-type(2n){
    background-color: var(--gray1);
}
.fileDetailsTable tr td{
    padding: 5px 10px;
}
.fileDetailsTable tr td:nth-of-type(2){
    text-align: right;
}
.showOnCondition{
    display: none;
}
a[data-fancybox]{
    cursor: zoom-in;
}
.contentButtons > div{
    width: 23%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--gray1);
    padding: 18px 0;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 20px;
    border-radius: var(--borderRadius);
    cursor: pointer;
}
.contentButtons > div:empty{
    border: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.contentButtons.mainComponents > div{
    width: 100%;
}
.contentButtons.specificComponents > div{
    width: 49%;
}
.gMap{
    border: 0;
    max-width: 100%;
    width: 100%;
    display: block;
}
.contentTypeList{
    display: none;
}
.contentButtons > div.currentContentType{
    cursor: default;
    border-color: var(--color1);
}
.dimensions{
    display: flex;
    justify-content: center;
    font-size: 8px;
}
.dimensionBox{
    border: 1px dashed #333;
    padding: 0px;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.borderBox, .elemBox{
    border-style: solid;
}
.dimensions input{
    height: 20px !important;
    line-height: 20px !important;
    font-size: 9px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}
.dimensionBox span{
    line-height: 20px;
    padding-left: 6px;
}
.sideInput{
    width: 25px;
}
.marginBox{
    background-color: #e2d7fe;
}
.borderBox{
    background-color: #fae6db;
}
.paddingBox{
    background-color: #f2f2f2;
}
.elemBox{
    background-color: #d2e0ec;
    height: 20px;
}
.customRange{
    display: flex;
    align-items: center;
}
.customRange input{
    flex: 1;
}
.unitSelector{
    margin-bottom: 10px;
}
.customRange select,
.unitSelector select{
    width: 60px;
    padding: 0;
    margin-left: 10px;
    margin-bottom: 0 !important;

    text-align: justify; /* For Edge */
    -moz-text-align-last: center; /* For Firefox prior 58.0 */
    text-align-last: center;
}
.customRange select option{
    text-align: center;
}
.customRange input[type=range]{
    -webkit-appearance: none;
    width: 100%;
    height: 10px !important;
    background: var(--gray1);
    outline: none;
    border-radius: 100px !important;
    margin-bottom: 0 !important;
}
.customRange input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: var(--color1);
    cursor: pointer;
}
.customRange input[type=range]::-moz-range-thumb{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: var(--color1);
    cursor: pointer;
    outline: 0;
    border: 0;
}
.customRange input[type=range]:disabled::-webkit-slider-thumb{
     background: var(--gray3);
     cursor: default;
}
.customRange input[type=range]:disabled::-moz-range-thumb{
    background: var(--gray3);
    cursor: default;
}
.adminForm .customRange input[type=text]{
    width: 60px !important;
    max-width: 60px;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 0 !important;
    padding: 0 !important;
}
.editList{
    justify-content: flex-start;
}
.editList > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}
.editList > div:last-of-type{
    margin-bottom: 0;
}
.editList > div h3 i{
    margin-right: 10px;
}
.colorSelector{
    display: flex;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}
.colorSelector .globals{
    flex: 6;
    display: flex;
    border-radius: 3px;
    overflow: hidden;
}
.colorSelector .webColor{
    height: 40px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    cursor: pointer;
    box-shadow: 1px 1px 6px rgb(0 0 0 / 8%) inset;
}
.colorSelector .webColor.selected:after{
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #fff;
    content: '';
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5));
}
.colorSelector input.webColor{
    appearance: none;
    margin: 0;
}

/* fancyBorder */
.fancyBorderContainer{
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}
.fancyBorder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px dashed #f2f2f2;
    max-width: 100%;
    box-sizing: border-box;
}
.fancyBorder:hover .handle{
    opacity: 1;
}
.fancyBorder .handle{
    background-color: #fff;
    height: 8px;
    width: 8px;
    border: 1px solid #000;
    position: absolute;
    cursor: pointer;
    z-index: 19;
    opacity: 0.1;
    transition: opacity 200ms;
}
.fancyBorder .handle:hover{
    outline: 1px solid #692cff;
}
.fancyBorder .shape{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, #f68e56 0%, #692cff 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
.fancyBorder .handleTop{
    margin-top: -5px;
    top: 0;
    left: 30%;
}
.fancyBorder .handleRight{
    margin-right: -5px;
    top: 30%;
    right: 0;
}
.fancyBorder .handleBottom{
    margin-bottom: -5px;
    bottom: 0;
    left: 30%;
}
.fancyBorder .handleLeft{
    margin-left: -5px;
    top: 30%;
    left: 0;
}
/* /fancyBorder */

.designAdminSidebar .adminForm label{
    font-size: 14px;
}
.designAdminSidebar .multiToggle,
.verticalBarRight .multiToggle{
    margin: 10px 0;
}
.blueprint.blueprintStructure .blueprintInner{
    max-height: calc(100vh - 260px);
}
.ck.ck-editor__editable_inline{
    padding: 0 !important;
}
.elemRow, .elemRow2{
    /*background-color: rgba(0,0,0,.01);*/
    display: flex;
    box-sizing: border-box;
}
.elemCol, .elemCol2{
    /*background-color: rgba(0,0,0,.01);*/
    flex: 1;
    /*padding: 3px;*/
    display: flex;
    flex-direction: column;
}
.elemRow2{
    /*background-color: rgba(0,0,0,.01);*/
    /*padding: 3px;*/
    flex: 1;
}
.elemCol2{
    /*padding: 3px;*/
    /*background-color: rgba(0,0,0,.01);*/
    flex-direction: row;
    margin-right: 3px;
    display: block;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.elemCol2:last-of-type{
    margin-right: 0;
}
.elemImage{
    max-width: 100%;
}
.rainbowText{
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    background: linear-gradient(84deg,#f68e56,#f26e7e 18.2%,#be5188 38%,#8a3391 53.65%,#805ac3 74%,#692cff);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    text-shadow: none;
}

.iconPreviewBox{
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 122px;
    height: 122px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    margin-bottom: 17px;
    /*box-shadow: var(--boxShadow1);*/
    border: 1px solid var(--gray1);
    padding: 8px;
    box-sizing: border-box;
    transition: border-color 200ms;
    cursor: pointer;
}
.iconPreviewBox:hover{
    border-color: var(--gray2);
}
.iconPreviewBox.selected{
    border-color: var(--color1);
}
.iconPreviewBox i {
    font-size: 32px;
    color: #183153;
    
}
.iconPreviewBox span{
    margin-top: 18px;
    font-size: 12px;
}
.iconPreviewBox.placeholder{
    border: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

.tooltiptext {
    display: none;
    width: 145px;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 120%;
    left: 50%;
    margin-left: -68px;
    font-size: .7em;
}
.tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(0,0,0,.8) transparent;
}
.toClipboard{
    position: relative;
}
.toClipboard .tooltiptext.visible {
    visibility: visible;
}
.iconSelector{
    display: flex;
    align-items: center;
}
.iconSelector .preview{
    margin-left: 15px;
    font-size: 18px;
}
.iconSelector .preview div:after{
    content: var(--previewIcon);
    font: var(--previewFont);
    font-size: 18px;
}
.editList .selected{ position: relative; }
.editList .selected:after {
    content: '';
    width: 5px;
    height: 100%;
    background-color: #540fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    position: absolute;
    top: 0;
    right: -55px;
}
.sticky{
    position: sticky;
    top: 0;
}
th .fa-sort:after{
    opacity: .2;
}
th[data-orderby]{
    cursor: pointer;
}
.calendarCrd{
    --fc-button-bg-color: var(--color1);
    --fc-button-border-color: var(--color1);
    --fc-event-border-color: var(--color1);
}
.calendarCrd .fc .fc-toolbar-title{
    font-size: 24px;
    color: var(--gray3);
}
.toggleShowContainer{
    position: relative;
}
.toggleShowContainer input{
    margin-bottom: 0 !important;
    padding-right: 40px !important;
}
.toggleShowTrigger{
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translate(0, -50%);
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    width: 15px;
    text-align: center;
}
/*.toggleShowContainer input:placeholder-shown + .toggleShowTrigger{
    display: none;
}/**/
.templateBlock{
    cursor: pointer;
}
.templateBlock:nth-of-type(2n){
    margin-right: 0;
}
.templateBlock hr{
    background-color: var(--gray2);
    height: 1px;
    border: 0;
    margin: 12px 0 14px 0;
}
.publicDot{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #39b54a;
    border: 2px solid #fafafa;
    border-radius: 100%;
    box-shadow: 0 2px 3px 1px #0000000d;
    box-sizing: border-box;
    margin-right: 6px;
}
.screenshotTarget{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
}
.screenshotTarget img{
    max-width: 100%;
    border: 1px dashed var(--gray1);
    border-radius: 3px;
}
.templateTypeContainer{
    display: none;
}
.selectedElementHelper{
    display: none;
}
.beta:after {
    content: 'BETA';
    font-size: .35em;
    background: var(--color2);
    padding: 1px 6px;
    border-radius: 30px;
    margin-left: 0.5em;
    position: relative;
    top: -1.5em;
}
button.simple{
    border: 0;
    background: transparent;
    cursor: pointer;
}
figure{
    margin: 0;
}
.onoffToggle input{
    display: none;
}
.onoffToggle label{
    display: flex;
    width: 50px;
    height: 26px;
    border-radius: 100px;
    align-items: center;
    padding: 0 3px;
    box-sizing: border-box;
    margin-left: auto;
    background-color: var(--gray1);
    box-shadow: inset 0px 0px 5px rgb(0 0 0 / 15%);
    transition: background-color 300ms, box-shadow 300ms;
    cursor: pointer;
}
.onoffToggle label:after{
    content: '';
    display: block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    background-color: #fff;
    box-shadow: var(--boxShadow1);
    transition: color 300ms, margin-left 300ms;
}
.onoffToggle input:checked + label{
    background-color: var(--color1);
    box-shadow: inset 0px 0px 5px rgb(0 0 0 / 50%);
}
.onoffToggle input:checked + label:after{
    /*background-color: var(--color1);*/
    margin-left: 24px;
}
.youtube.video{
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}
.monospace{
    font-family: monospace !important;
}
.customcode .adminForm textarea{
    height: 150px;
    max-height: none;
}
.yt-new-gradient{
    background: linear-gradient(to right,#ff8983 17.85%,#7f0e7f 53.28%,#007a65 100%);
}
.filmstrip .screenshot{
    border: 1px solid #f1f2f9;
}
.gradientMaker{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.gradientMaker .previewWindow{
    height: 40px;
    width: 40px;
    /*background-image: linear-gradient(131deg, rgb(204, 204, 204) 0%, rgb(246, 142, 86) 67%);*/
    border-radius: var(--borderRadius);
    margin-right: 15px;
    box-sizing: border-box;
    /*border: 1px solid var(--gray2);*/
}
.gradientMakerContainer h2{
    margin-bottom: 25px;
}
.gradientMakerContainer .customNumberInput{
    margin-right: 15px;
}
.gradientBar{
    height: 10px;
    border: 1px solid #ccc;
    position: relative;
    box-sizing: border-box;
    border-radius: 5px;
    cursor: copy;
    margin-bottom: 35px;
    background-image: linear-gradient(20deg, var(--color1), var(--color2))
}
.gradientBar .handle{
    position: absolute;
    top: -9px;
    left: 0;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gray2);
    background-color: #fff;
    border-radius: 20px;
    box-sizing: border-box;
    cursor: grab;
    display: flex;
    justify-content: center;
    align-items: center;
}
.gradientBar .handle .colorDot{
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: var(--color1);
}
.gradientPreview{
    border-radius: var(--borderRadius);
    margin-left: 35px;
}
.gradientMakerOptions{
    border: 1px solid var(--gray1);
    border-radius: var(--borderRadius);
    padding: 25px;
}
.gradientSettings{
    margin-bottom: 25px;
}
.gradientMakerContainer .redOnHover{
    margin-bottom: 10px;
    margin-left: 25px;
}

/*** ui-anglepicker ***/
.ui-anglepicker {
    width: 40px;
    height: 40px;

    background: var(--gray1);
    background: -moz-linear-gradient(top, #dbdbdb 0%, var(--gray1) 20%, #f8f8f3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbdbdb), color-stop(20%,var(--gray1)), color-stop(100%,#f8f8f3));
    background: -webkit-linear-gradient(top, #dbdbdb 0%,var(--gray1) 20%,#f8f8f3 100%);
    background: -o-linear-gradient(top, #dbdbdb 0%,var(--gray1) 20%,#f8f8f3 100%);
    background: -ms-linear-gradient(top, #dbdbdb 0%,var(--gray1) 20%,#f8f8f3 100%);
    background: linear-gradient(to bottom, #dbdbdb 0%,var(--gray1) 20%,#f8f8f3 100%);
    
    border: 1px solid var(--gray2);

    -moz-box-shadow: inset 0 2px 3px white, inset 0 -1px 2px #fffef8;
    -webkit-box-shadow: inset 0 2px 3px white, inset 0 -1px 2px #fffef8;
    box-shadow: inset 0 2px 3px white, inset 0 -1px 2px #fffef8;

    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    margin-right: 30px;
    box-sizing: border-box;
    transition: border-color 200ms;
}
.ui-anglepicker-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;

    margin: -2px 0 0 -2px;
    -moz-transform-origin: 2px 2px;
    -webkit-transform-origin: 2px 2px;
    -ms-transform-origin: 2px 2px;
    -o-transform-origin: 2px 2px;
    transform-origin: 2px 2px;
}
.ui-anglepicker:hover, .ui-anglepicker.ui-anglepicker-dragging {
    border-color: var(--gray3);
}
.ui-anglepicker-dragging .ui-anglepicker-dot, .ui-anglepicker-dragging .ui-anglepicker-line,
.ui-anglepicker:hover .ui-anglepicker-dot, .ui-anglepicker:hover .ui-anglepicker-line {
    background: #494949;
}
.ui-anglepicker-dot {
    height: 4px;
    width: 4px;
    position: absolute;
    background: #838383;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.ui-anglepicker-line {
    margin-top: 1.5px;
    margin-right: -2px;
    height: 1px;
    background: #838383;
}
/*** ui-anglepicker ***/

.customConfirmText{
    margin-bottom: 15px;
}
.customConfirm .popupContent.crd{
    width: 500px;
}
.customConfirmConfirm.button i {
    margin: 0;
}
@media screen and (max-width: 1600px){
    .verticalBarLeft:not(.sysBarLeft){
        width: 71px;
        padding: 45px 0 45px 25px;
        box-sizing: border-box;
    }
    .verticalBarLeft:not(.sysBarLeft) .logo{
        padding-right: 25px;
    }
    .verticalBarLeft:not(.sysBarLeft) li span:not(.alert){
        display: none;
    }
    .verticalBarLeft:not(.sysBarLeft) ul li a span.alert{
        width: 14px;
        height: 14px;
        font-size: 7px;
        margin-left: -10px;
        margin-top: -18px;
    }
    .verticalBarRight {
        width: 400px;
        padding: 45px 15px;
    }
}