:root {
    --space-5: 5px;
    --space-20: 20px;
    --space-40: 40px;
    --fontSmall: 16px;
    --fontMain: 18px;
    --fontLarge: 20px;
    --fontFamily: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    --profileSize: 45px;
    --profileIconNav: 40px;

    --marginSmall: 10px;
    --marginBasic: 20px;
    --marginLarge: 35px;
    --marginLarger: 50px;

    --navbarHeight: 60px;
    --navlinksDisplay: none;

    --colorMainBackground: #f2f2f2;
    --colorThemeDark: #408fa3;
    --colorThemeDarkHover: #4eb1ca;
    --colorThemeDarker: #337788;
    --colorThemeDarkest: #26606e;
    --colorThemeLight:  #c6e1e8;
    --colorThemeLightAlpha: rgb(198,225,232,0.8);

    --colorLink: #8151f0;
    --colorGrayDark: #383838;
    --colorGrayMedium: #878787;
    --colorGrayLight: #a5a5a5;
    --colorGrayLighter: #e6e6e6;
    --colorGrayLightest: #fafafa;
    --colorYellowLightest: #f8f8f8;
    --colorTag: #b9b9b9;
    --colorTagHover: #a7a7a7;
    --colorTagSelected: #cacaca;
    --colorDangerDark: #d13232;
    --colorDangerLight: #d37b7b;
    --colorSuccessLight: #96be94;
    --colorOrange: #e99c37;
    --colorDarkAlpha: rgba(75, 75, 75, 0.3);

    --alphaMonth: 0.95;
    --oldJan: rgb(64,150,41,var(--alphaMonth));
    --colorJan: rgb(136,156,131,var(--alphaMonth)); 
    --colorFeb: rgb(127,199,61,var(--alphaMonth)); 
    --colorMar: rgb(234,202,102,var(--alphaMonth)); 
    --colorApr: rgb(249,205,70,var(--alphaMonth)); 
    --colorMay: rgb(243,157,56,var(--alphaMonth)); 
    --colorJun: rgb(239,110,46,var(--alphaMonth));
    --colorJul: rgb(237,50,36,var(--alphaMonth));
    --colorAug: rgb(188,42,149,var(--alphaMonth));
    --colorSep: rgb(141,32,149,var(--alphaMonth));
    --colorOct: rgb(93,23,147,var(--alphaMonth));
    --colorNov: rgb(21,83,204,var(--alphaMonth));
    --colorDec: rgb(77,177,192,var(--alphaMonth));

    --colorScrollbarThumb: 171,171,171;

    --linkActive: #2164e0;
    --successText: #60ac42;
    --errorText: #da4437;
    --colorGood: #5f77ff;

    --buttonPadding: 10px 15px;
    --buttonPrimary: #3470e0;
    --buttonPrimaryHover: #548cf3;
    --buttonSecondary: #d6d6d6;
    --buttonSecondaryHover: #e6e6e6;
    --buttonDanger: #eb2929;
    --buttonDangerHover: #fb5959;

    /* Style */
    --mainActive: #689cfc;
    --mainInactive: #bac6dd;
    --mainActiveHover: #74a4fc;
    --mainDisabled: #f2f2f2;

    --outlineMediumOrange: solid 3px #f39d38;

    --tagFontSize: 15px;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
}

input,
div,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: transparent;
}

html{
    scroll-behavior: smooth;
    width: 100%;
}
body {
    font-family: var(--fontFamily);
    font-size: var(--fontMain);
    color: #000000;
    background-color: var(--colorMainBackground);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

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

.link-active {
    color: var(--linkActive);
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    margin-top: 5px;
}

button{
    margin: 0;
}

.navbar {
    color: #fff;
    background-color: var(--colorThemeDark);
    height: var(--navbarHeight);
    width: 100%;
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    column-gap: 0;
}

.navbar ul{
    padding: 0;
    list-style-type: none;
}

.navbar li {
    float: left;
    padding: 0;
    margin-right: 40px;
}
.navbar .account i {
    color: #fff;
}
.nav-left-start{
    height: var(--homeLogoHeight);
    width: var(--homeLogoWidth);
    margin-left: 5%;
    overflow: hidden;
}
.nav-right-end{
    position: absolute;
    right: 0px;
}
.nav-links{
    display: var(--navlinksDisplay);
}

/* Menu */
.nav-icon{
    padding: 0 20px;
    position: relative;
    z-index: 4;
}
.account {
    width: 100px;
    height: 100px;
    border-radius: var(--profileSize);
    position: absolute;
    top: -22px;
    right: 10px;
    z-index: 3;
}

.account i {
    font-size: 48px;
    color: #fff;
}

.account .profile-image{
    width:  var(--profileSize);
    height: var(--profileSize);
    border-radius: var(--profileSize);
    overflow: hidden;
    border: 2px solid #fff;
    background-image: linear-gradient(10deg, #84fab0 0%, #52a4cd 100%);
}
.account .profile-image ::before{
    display: block;
}

.account .dropdown{
    padding: 5px 10px 5px 10px;
    border-radius: 20px;
    position: relative;
    top: -20px;
    color: #fff;
    background-color: var(--colorThemeDark);
    transition-duration: 0.3s;
    opacity: 0;
}
.account .dropdown.active{
    opacity: 0.2;
    filter: blur(1px);
    top: 5px;
}
.account .dropdown:hover{
    opacity: 1;
    filter: blur(0px);
}
.login{
    padding: 8px 15px;
    background-color: var(--colorThemeDarker);
    border-radius: 20px;
}
.login:hover{
    background-color: var(--colorThemeDarkHover);
}
.menu-deskview{
    display: var(--menuDesktopView) !important;
}
.menu-mobileview{
    display: var(--menuMobileView) !important;
}
.menu-modal{
    text-align: center;
    position: fixed;
    font-size: var(--menuFontSize);
    background-color: var(--colorThemeLightAlpha);
    backdrop-filter: blur(12px);
    top: 0;
    padding-top:var(--navbarHeight);
    z-index: 4;
    width: 100%;
    height: 0%;
    overflow: hidden;
    transition: 0.3s;
    opacity: 0;
}
.menu .toggle-menu{
    opacity: 1;
}
.menu ul 
{
    list-style-type: none;
    padding: 0 5% 0% 5%;
}
.menu li{
    color: #fff;
    margin-bottom: 15px;
    padding: 5% 0% 5% 0;
    background-color: var(--colorThemeDark);
    border-radius: 10px;
}
.menu li:hover{
    background-color: var(--colorThemeDarkHover);
}
.menu .btn li{
    font-size: var(--menuFontSize);
}
/* Menu end */

/* .searchbar {
    width: 120px;
    right: 260px;
    margin-top: 12px;
    position: absolute;
    top: 0;
    display: none;
}

.searchbar #textsearcher {
    padding: 10px 15px 10px 15px;
    border-radius: 5px;
    border-style: none;
    outline: 1px solid var(--colorGrayLight);
} */
.searchbar-input{
    position: relative;
    z-index: 2;
}
.search-result-holder{
    border-radius: 0 0 5px 5px;
    border: 1px solid var(--colorGrayLight);
    background-color: #fff;
    z-index: 1;
    margin-top: -4px;
}
.search-result{
    padding: 10px 15px 10px 15px;
    color: #000;
}
.search-result:hover{
    background-color: #c8dfee;
}

.tags {
    font-size: var(--tagFontSize);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: var(--tagMargin);
    padding: 0 20px;
}
a .tag{
    color: #fff;
}

.tag {
    color: #fff;
    background-color: var(--colorTag);
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
}

.light-tag{
    color: var(--colorGrayMedium);
    background-color: var(--colorGrayLighter);
    padding: 1px 5px 1px 5px;
    margin: 0 5px 5px 0;
    border-radius: 3px;
    display: inline-block;
}

.tag:hover {
    cursor: pointer;
}

.tag:not(.selected):hover {
    background-color: var(--colorTagHover);
}

.tag.selected {
    color: var(--colorThemeDarkest);
    background-color: #fff;
    outline: 1px solid var(--colorGrayLight);
}

.maincontent {
    background-color: #f2f2f2;
    padding-top: 60px;
    position: relative;
}

.clear:after {
    clear: both;
    height: 0;
    width: 100%;
    content: "";
    display: block;
}

.bold {
    font-weight: bold;
}

.outline {
    outline: 1px solid var(--colorGrayLight);
}

.pointer{
    cursor: pointer;
}

/* Effects */
.transition.s1{ transition-duration: 0.1s; }
.transition.s2{ transition-duration: 0.2s; }
.transition.s3{ transition-duration: 0.3s; }
.transition.s4{ transition-duration: 0.4s; }
.transition.s5{ transition-duration: 0.5s; }

.brightness.v5{ filter: brightness(0.5); }
.brightness.v6{ filter: brightness(0.6); }
.brightness.v7{ filter: brightness(0.7); }
.brightness.v8{ filter: brightness(0.8); }
.brightness:hover { filter: brightness(1); }

/* Opacity */
.opacity.v2{ opacity: 0.2; }
.opacity.v5{ opacity: 0.5; }
.opacity.v6{ opacity: 0.6; }
.opacity.v7{ opacity: 0.7; }
.opacity.v8{ opacity: 0.8; }
.opacity.v10{ opacity: 1; }
.opacity:hover { opacity: 1; }
/* End of effects */

/* Text colors */
.color-gray-light{
    color: var(--colorGrayLight);
}
.color-gray-lighter{
    color: var(--colorGrayLighter);
}
.color-gray-medium{
    color: var(--colorGrayMedium);
}
.color-gray-dark{
    color: var(--colorGrayDark);
}
.color-t-dark{
    background-color: var(--colorThemeDark);
    color: #fff;
}
.color-t-light{
    background-color: var(--colorThemeLight);
}
/* Text colors end */

/* Background colors */
.Jan { background-color: var(--colorJan); }
.Feb { background-color: var(--colorFeb); }
.Mar { background-color: var(--colorMar); }
.Apr { background-color: var(--colorApr); }
.May { background-color: var(--colorMay); }
.Jun { background-color: var(--colorJun); }
.Jul { background-color: var(--colorJul); }
.Aug { background-color: var(--colorAug); }
.Sep { background-color: var(--colorSep); }
.Oct { background-color: var(--colorOct); }
.Nov { background-color: var(--colorNov); }
.Dec { background-color: var(--colorDec); }
/* Background colors end*/

/* Positionings */
.full-width{
    width: 100%;
}
.full-height{
    height: 100%;
}
.align-center {
    text-align: center;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}

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

.margin-center {
    margin-left: auto;
    margin-right: auto;
}
.margin-t-5{ margin-top: 5px !important; }
.margin-t-10{ margin-top: 10px !important; }
.margin-t-15{ margin-top: 15px !important; }
.margin-t-20{ margin-top: 20px !important; }
.margin-t-30{ margin-top: 30px !important; }
.margin-t-50{ margin-top: 50px !important; }
.margin-r-5{ margin-right: 5px !important; }
.margin-r-10{ margin-right: 10px !important; }
.margin-r-20{ margin-right: 20px !important; }
.margin-l-5{ margin-left: 5px !important; }
.margin-l-10{ margin-left: 10px !important; }
.margin-l-20{ margin-left: 20px !important; }
.margin-b-5{ margin-bottom: 5px !important; }
.margin-b-10{ margin-bottom: 10px !important; }
.margin-b-15{ margin-bottom: 15px !important; }
.margin-b-20{ margin-bottom: 20px !important; }
.margin-b-30{ margin-bottom: 30px !important; }
.margin-b-50{ margin-bottom: 50px !important; }

.padding-10 { padding:10px; }
.padding-20 { padding:20px; }
.padding-50 { padding:50px; }
.padding-t-5{ padding-top: 5px !important; }
.padding-t-10{ padding-top: 10px !important; }
.padding-t-15{ padding-top: 15px !important; }
.padding-t-20{ padding-top: 20px !important; }
.padding-t-30{ padding-top: 40px !important; }
.padding-t-50{ padding-top: 50px !important; }
.padding-r-5{ padding-right: 5px !important; }
.padding-r-10{ padding-right: 10px !important; }
.padding-r-15{ padding-right: 15px !important; }
.padding-r-20{ padding-right: 20px !important; }
.padding-r-30{ padding-right: 40px !important; }
.padding-r-50{ padding-right: 50px !important; }
.padding-b-5{ padding-bottom: 5px !important; }
.padding-b-10{ padding-bottom: 10px !important; }
.padding-b-15{ padding-bottom: 15px !important; }
.padding-b-20{ padding-bottom: 20px !important; }
.padding-b-30{ padding-bottom: 40px !important; }
.padding-b-50{ padding-bottom: 50px !important; }
.padding-l-5{ padding-left: 5px !important; }
.padding-l-10{ padding-left: 10px !important; }
.padding-l-15{ padding-left: 15px !important; }
.padding-l-20{ padding-left: 20px !important; }
.padding-l-30{ padding-left: 40px !important; }
.padding-l-50{ padding-left: 50px !important; }

.float-l { float: left; }
.float-r { float: right; }
.fixed{ position: fixed; }
.relative{ position: relative; }
.sticky{
    position: -webkit-sticky; /* Required for Safari */
    position: sticky;
}
.absolute{ position: absolute; }
.absolute-middle{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.middle-b-space {
    margin-top: var(--space-normal);
}

.middle-b-space {
    margin-bottom: var(--space-normal);
}

.large-t-space {
    margin-top: var(--space-large);
}

.large-b-space {
    margin-bottom: var(--space-large);
}
/* Positionings end */

/* Display*/
.none{
    display: none !important;
}
.block{
    display: block;
}
.hidden{
    visibility: hidden;
}
.visible{
    visibility: visible;
}
.overflow-hidden{
    overflow: hidden;
}
.inline-block{
    display: inline-block;
}
/* Display end */

/* Flex */
.flex{
    display: flex;
    column-gap: 0px;
}
.flex.auto{
    flex: auto;
}
.flex.full-center{
    align-items: center;
    justify-content: center;
}
.flex.items-center{
    align-items: center;
}
.flex.items-start{
    align-items: flex-start;
}
.flex.justify-center{
    justify-content: center;
}
.flex.justify-left{
    justify-content: left;
}
.flex.justify-right{
    justify-content: right;
}
.flex.justify-spacebetween{
    justify-content: space-between;
}
.flex.align-start{
    align-content: start;
}
.wrap{
    flex-wrap: wrap;
}
.nowrap{
    flex-wrap: nowrap;
}
.gap0{ gap: 0px; }
.gap5{ gap: 5px; }
.gap10{ gap: 10px; }
.gap15{ gap: 15px; }
.gap20{ gap: 20px; }
.gap30{ gap: 30px; }
.gap40{ gap: 40px; }
.gap50{ gap: 50px; }

/* Containers */

.container-smallest{
    width: var(--containerSmallestWidth);
    margin: var(--marginLarger) auto var(--marginLarger) auto;
}

.container-small{
    width: var(--containerSmallWidth);
    margin: var(--marginLarger) auto var(--marginLarger) auto;
}

.container-basic{
    width: var(--containerBasicWidth);
    margin: var(--marginLarger) auto var(--marginLarger) auto;
}
.container-large{
    width: var(--containerLargeWidth);
    margin: var(--marginLarger) auto var(--marginLarger) auto;
}
/* Containers end*/

/* Collapsible */
.toggle-button{
    cursor: pointer;
}
.toggle-menu{
    display: block;
    height: 100%;
}
/* .toggle-target{
    display: block !important;
} */
/* Collapsible end */

/* Hover basics */

/* Hover basics end*/

/* Texts */
blockquote{
  background-color: #ededed;
  margin: 10px auto;
  padding: 15px;
  border-radius: 5px;
}
blockquote::before {
  content: "\201C\ ";
}

blockquote::after {
  content: " \201D";
}
.text16{
    font-size: 16px;
}
.text18{
    font-size: 18px;
}
.text20{
    font-size: 20px;
}
.text-shorten{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.text-shorten.small{
    max-width: var(--maxWidthSmall);
}
.text-shorten.main{
    max-width: var(--maxWidthMain);
}
.text-shorten.large{
    max-width: var(--maxWidthLarge);
}
.text-linethrough{
    text-decoration: line-through;
}
.weight-small{
    font-weight: 100;
}
.weight-main{
    font-weight: 400;
}
.weight-bold{
    font-weight: 600;
}
.weight-bolder{
    font-weight: 700;
}
.line-clamp{
    overflow: hidden;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
.line-clamp.l1{
    -webkit-line-clamp: 1;
    line-clamp: 1;
}
.line-clamp.l2{
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.line-clamp.l3{
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.line-clamp.l4{
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
.text-max100{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.word-break{
    display: inline-block;
    word-break: break-word;
}
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Texts end */

/* Pagination */
.pagination{
    text-align: center;
    margin: 10px 0 0 0;
    padding: 0;
}
.pagination ul{
    padding: 0;
}
.pagination li{
    font-size: 18px;
    padding: 5px 10px 5px 10px;
    display: inline-block;
    color: #fff;
    background-color: var(--mainInactive);
}
.pagination li:hover{
    background-color: var(--mainActive);
    cursor: pointer;
}
.pagination .current{
    background-color: var(--mainActive);
}
/* Pagination end */

/* Scrollbar */
::-webkit-scrollbar { 
    width: var(--scrollbarWidth);
    height: var(--scrollbarWidth);
}
::-webkit-scrollbar-track {
background: #fff; 
border-radius: var(--scrollbarRadius);
}
::-webkit-scrollbar-thumb {
background: rgb(var(--colorScrollbarThumb), 0.7);
border-radius: var(--scrollbarRadius);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(var(--colorScrollbarThumb), 1);
cursor: pointer;
}
/* Scrollbar end */

/* Tables end */
.table-normal {
    border-collapse: collapse;
    table-layout: fixed;
}

.table-normal tr {
    margin: 0;
}

.table-normal tr {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: var(--colorGrayLighter);
}

.table-normal td {
    padding: 10px;
}

.table-schedule{
    border-collapse:collapse;
    width: 100%;
}
.table-schedule td{
    padding: 5px 10px;
    border: solid 1px #383838;
}

/* Tables end */

/* Trix */
.trix-editor{
    height:600px; 
    overflow-y:auto;
    background-color: #fff;
    margin-bottom: 15px;
}
/* Trix end*/

/* Forms*/
/* .form-main label {
    width: 100%;
    display: inline-block;
} */

.form-main #trix{
    margin-bottom: 15px;
    overflow-y:auto;
}

.form-main .form-checkbox {
    width: auto;
}

.form-main textarea {
    font-size: var(--fontMain);
    font-family: var(--fontFamily);
    width: 100%;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--colorGrayLight);
    border-radius: 5px;
}

.form-main select {
    font-size: var(--fontMain);
    font-family: var(--fontFamily);
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    margin-right: 0;
    display: inline-block;
    border: 1px solid var(--colorGrayLight);
    border-radius: 3px;
}
.form-main input{
    font-size: var(--fontSmall);
    font-family: var(--fontFamily);
    display: inline-block;
    border: 1px solid var(--colorGrayLight);
    border-radius: 3px;
    background-color: #fff;
}
.form-main input:disabled{
    background-color: var(--mainDisabled);
}
.form-main input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}

.form-main input[type="date"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}

.form-main input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}
.form-main input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}
.form-main input[type="file"] {
    width: 100%;
    margin-top: 5px;
}

.form-main input[type=radio] {
    border: 0px;
    width: 15px;
    height: 15px;
}
.form-main input[type="checkbox"] {
    margin-top: 7px;
    width: 22px;
    height: 20px;
}

.form-main input:focus {
    outline: none;
}

.form-main textarea:focus {
    outline: none;
}

.form-main input[type="file"]::file-selector-button {
    font-size: var(--fontSmall);
    font-family: var(--fontFamily);
    background-color: var(--colorGrayLighter);
    margin-right: 10px;
    padding: 10px;
    border: none;
}

.form-main input[type="file"]::file-selector-button:hover {
    background-color: var(--colorGrayLightest);
}

/* Forms end */
.card-container{
    height: 100%;
    width: 100%;
    position: fixed;
}

.card-container .button{
    font-size: 30px;
    display: inline-block;
    position: absolute;
    top: -40px;
    right: -35px;
    margin: 0;
    padding: 20px;
}
.card-container .button i{
    color: var(--colorGrayMedium);
}

.card-container .flex{
    height: 200px;
    width: 500px;
    background-color: rgb(255,255,255,0.8);
    backdrop-filter: blur(10px);
    position: absolute;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
}
.card-holder{
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-border{
    color: #fff;
    padding: 2px;
}
.card{
    padding: 20px;
}
.card.error{ background-color: var(--colorDangerLight); }
.card-border.error{ border: solid 2px var(--colorDangerLight); }
.card.success{ background-color: var(--colorSuccessLight); }
.card-border.success{ border: solid 2px var(--colorSuccessLight);}
.card.orange{ background-color: var(--colorOrange); }
.card-border.orange{ border: solid 2px var(--colorOrange);}

.success-text {
    color: var(--successText);
}

.error-message {
    color: var(--errorText);
}

.online{
    color: var(--colorGood);
}

.offline{
    color: var(--buttonDanger);
}

.inherit{
    color: inherit !important;
}
a .btn{
    color: inherit;
}
.btn {
    font-size: var(--fontSmall);
    font-family: var(--fontFamily);
    padding: var(--buttonPadding);
    margin: 0;
    border-style: none;
    border-radius: 5px;
    display: inline-block;
    transition: 200ms;
    /* Unselectable parts down */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn-logout{
    padding: inherit;
    margin: inherit;
    width: 100%;
    color: #fff;
    background-color: rgb(0,0,0,0);
}

.btn:hover {
    cursor: pointer;
}

.btn.primary {
    color: #fff;
    background-color: var(--colorThemeDark);
}

.btn.primary:disabled {
    color: #fff;
    background-color: var(--colorThemeLight);
}

.btn.primary:hover {
    background-color: var(--colorThemeDarkHover);
}

.btn.secondary {
    color: #000;
    background-color: var(--buttonSecondary);
}

.btn.secondary:hover {
    color: #fff;
    background-color: var(--colorThemeDark);
}

.btn.gray {
    color: #000;
    background-color: var(--colorGrayLighter);
}

.btn.gray:hover {
    filter:brightness(0.9);
}

.btn.danger {
    color: #fff;
    background-color: var(--buttonDanger);
}

.btn.danger:hover {
    background-color: var(--buttonDangerHover);
}

/*Interactables*/
.collapsible {
    display: block;
}

/*end Interactables*/

/* Image checkbox selecter */
.img-check-select input {
    margin: 0;
    padding: 0;
}

.img-check-select ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.img-check-select li {
    display: inline-block;
}

.img-check-select input[type="checkbox"] {
    display: none;
}

.img-check-select label {
    position: relative;
}

.img-check-select label:before {
    color: #fff;
    content: "";
    text-align: center;
    transform: scale(0);
    transition-duration: 0.3s;
    outline: solid 0;
    z-index: 1;
}

.img-check-select :checked+label:before {
    background-color: var(--colorGrayMedium);
    content: "✓";
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    transform: scale(1);
}

.img-check-select :checked+label {
    /* box-shadow: 0 0 5px var(--colorGrayLight); */
    outline: var(--outlineMediumOrange);
}

/* Image checkbox selecter end */

/* Images */
.image-null{
    background-color: var(--colorGrayLight);
}
.img-null{
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: var(--colorGrayLight);
}
.img-block{
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: 600;
    background-image: linear-gradient(140deg, #84fab0 0%, #52a4cd 100%);
}
.img-null i{
    font-size: 30px;
}
.img-list {
    overflow: hidden;
    position: relative;
    display: inline-block;
    z-index: 0;
}
.middle-cut-wider img {
    width: 100% !important;
    height: auto !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.middle-cut-longer img {
    height: 100% !important;
    width: auto !important;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.footer{
    font-size: 14px;
    color: #fff;
    width: 100%;
    padding: 20px 0;
    background-color: var(--colorThemeDarker);
}

.cookie-popup{
    color: #fff;
    font-size: 14px;
    position: fixed;
    z-index: 3;
    bottom: 0;
    width: 100%;
    padding: 15px 0;
    background-color: rgba(75, 75, 75, 0.7);
    backdrop-filter: blur(12px);
}

/* Images*/

/* List */
/* .container-list{
    width: 100%;
    overflow-x: auto;
    padding: var(--marginBasic);
}
.container-list td.foto{
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    outline: solid 1px var(--colorGrayLight);
    padding: 0;
    margin: 10px 0 10px 0;
} */
/* List end */

@media only screen and (max-width: 600px) {
    /* Medium devices: */
    :root{
        --homeLogoHeight: 80%;
        --containerSmallestWidth: 90%;
        --containerSmallWidth: 90%;
        --containerBasicWidth: 90%;
        --containerLargeWidth: 90%;
        --menuDesktopView: none;
        --menuMobileView: block;
        --menuFontSize: 25px;
        --scrollbarWidth: 5px;
        --scrollbarRadius: 10px;
    }
    .deskview{
        display: none;
    }
    .mobileview{
        display: block;
    }
    .flex.split div:nth-child(-n+2){ flex: 100%; };
}

@media only screen and (min-width: 600px) {
    /* Medium devices: */
    :root{
        --homeLogoHeight: 80%;
        --homeLogoWidth: 250px;
        --containerSmallestWidth: 400px;
        --containerSmallWidth: 90%;
        --containerBasicWidth: 90%;
        --containerLargeWidth: 90%;
        --menuDesktopView: none;
        --menuMobileView: block;
        --menuFontSize: 35px;
        --scrollbarWidth: 5px;
        --scrollbarRadius: 10px;
    }
    .deskview{
        display: block;
    }
    .mobileview{
        display: none;
    }
    .flex.split div:nth-child(-n+2){ flex: 45%; };
}

@media only screen and (min-width: 870px) {
    /* Large devices: */
    :root{
        --containerBasicWidth: 700px;
        --containerLargeWidth: 850px;
        --navlinksDisplay: block;
        --menuDesktopView: block;
        --menuMobileView: none;
    }
}

@media only screen and (min-width: 1200px) {
    /* Extra large devices: */
    :root{
        --containerSmallWidth: 600px;
        --containerBasicWidth: 800px;
        --containerLargeWidth: 1100px;
    }
}