/* ICONIFY */
.btn { border-radius: 20px; }
.btn iconify-icon.left, .btn-flat iconify-icon.left{margin-right: 13px; height: 100%;}
.btn iconify-icon.right, .btn-flat iconify-icon.right{margin-left: 13px; height: 100%;}
.sidenav li a iconify-icon{ font-size: 22px; margin: -1px 32px 0 0; float: right; color: rgba(0,0,0,0.54);}

/* LOGIN FORM */
input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]){border-bottom: 1px solid #f57c00; box-shadow: 0 1px 0 0 #f57c00;}
input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label{color: #f57c00}
body {min-height: 100vh;}
#sl-logo{width: 150px}

#form-background{height: 100vh; width: 100vw; position: fixed; background: white; top: 0; left: 0; z-index: 999;}
#form-container{margin: auto; width: 450px; }
#form-container .card-panel { border-radius: 10px; }
#form-container form{margin-top: 25px}
#form-container button { border-radius: 50px; text-transform: unset; }
.copyright{padding-left:10px}
@media (max-width: 601px){
    body.valign-wrapper{display: block}
    #form-container{max-width: 450px; width: inherit;}
    #form-container .card-panel{box-shadow: none}
    .copyright{padding-left:10px; position:absolute; bottom:10px}
}
#form-login .progress{background-color: #ffcd98; visibility: hidden; margin-bottom: 0;}
#form-login .progress .indeterminate{background-color: #ff8f00}

/* SIDENAV */
.sidenav-trigger{ position: absolute; top: 30px; left: -10px; padding: 0 8px; }
.sidenav-trigger.highlighted { box-shadow: 0px 0px 20px 4px rgba(255, 121, 0, 0.9) !important; }

.app-logo{ color: #202124; font-weight: 500; margin-bottom: 30px; padding-left: 10px; }
.app-logo span { display: block; font-size: 26px; position: relative; line-height: 26px; }
.app-logo .app-title::after { content: 'by'; font-size: 12px; position: absolute; left: 1px; bottom: -20px; }
.app-logo img { width: 94px; margin-left: 18px; }

#user-avatar { position: absolute; right: 15px; top: 25px;}
#avatar-menu .hide-on-index { display: none; }

#side-navigation{ height: 100vh; box-shadow: none; border-right: 1px solid rgba(0,0,0,.12); padding: 25px 15px 30px 20px; transition: 0.5s background-color; }
#sidenav-indicator h4{margin:0px}
#side-navigation.highlighted{ background-color: #f9ead6; }
#side-navigation h6{color: #5f6368; display:block; font-size: 12px; margin:0; padding: 0 0 12px 24px; border-bottom:0; height: 39px; font-weight: 500;}
#side-navigation #section-links li a.tab{color: #505458; line-height: 18px; padding: 12px 48px 12px 24px; height: 42px; border-radius: 21px;}
#side-navigation #section-links li a.tab.active{font-weight: bold; color:black; background-color: rgba(0,0,0,0.05);}
#side-navigation .divider{margin-top: 30px; margin-bottom: 30px}

/* GENERAL STYLE */
html{font-family: "Roboto", sans-serif;}

main .container{position: relative;}
@media only screen and (min-width: 993px) {main{padding-left: 300px;}}

hr { height: 1px; background-color: #e0e0e0; border: none; }

#previous-next { display: grid; padding: 50px 0; grid-gap: 15px; grid-template-columns: calc(50% - 15px / 2) calc(50% - 15px / 2); }
#previous-next .box { color: #000; display: block; border-radius: 20px; padding: 20px; background-color: rgba(0,0,0,0.05); cursor: pointer; }
#previous-next .box.hidden { visibility: hidden; }
#previous-next .box :is(.previous-title, .next-title) { font-size: 25px; opacity: 0.9; }
#previous-next .arrow { font-size: 16px; opacity: 0.7; }
@media only screen and (max-width: 601px) {
    #previous-next { grid-template-columns: none; }
    #previous-next .box.hidden { display: none; }
}

subpage{display:none;padding-top: 1.94rem; padding-bottom:50px}
subpage.show { display: block; } 
subpage h1 { font-size: 2.92rem; line-height: 110%; margin-bottom: 1.168rem; margin-top: 0px; font-weight: 500; }
@media only screen and (max-width: 992px) {
    subpage h1 { padding-left: 40px; }
}
@media only screen and (max-width: 601px) {
    subpage h1 { font-size: 40px; }
}
subpage h2 { font-size: 1.8rem; line-height: 110%; margin-bottom: 15px; margin-top: 50px; }
subpage p, subpage ol li, subpage ul li{font-size: 16px; color: #3b3b3b; font-weight: 300}
subpage img{max-width: 100%;}
subpage ol, subpage ul.browser-default{padding-left: 20px}
subpage ol > li, subpage ul.browser-default > li{margin-top:10px}
subpage ol ul.browser-default{list-style-type:disc;}

/* CUSTOM ELEMENTS */
.contact-card{ padding: 20px; padding-left: 8px; font-size: 15px; border-radius: 15px; width: 350px; display: inline-block; margin: 15px 30px 15px 0; position: relative; padding-left: 64px; border: 1px solid #d2d2d2;}
.contact-card b{font-size: 20px; color: black;}
.contact-card label{display: block; margin-bottom: 4px; text-transform: uppercase;}
.contact-card > iconify-icon { font-size: 24px; left: 11px; top: 23px; position: absolute; background-color: #bdbdbd; color: white; margin-top: 2px; border-radius: 50%; padding: 9px;}
.contact-card p { margin-top: 5px; margin-bottom: 0; font-size: 15px; }
.contact-card ul { margin:0; }
.contact-card ul.browser-default li { font-size: 15px; margin-top: 5px; font-weight: 400; }

file-card a{padding:8px; border-radius: 20px; width: 315px; display: inline-block; margin: 15px 30px 15px 0; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);}
file-card b{font-size: 20px; margin-left:60px; color:black}
file-card label{display:block; margin-left:60px; text-transform: uppercase;}
file-card iconify-icon { font-size: 24px; left:12px; position: absolute; background-color: #bdbdbd; color: white; margin-top: 2px; border-radius: 50%; padding: 9px;}

graphic-card{overflow:hidden; border-radius: 10px; width: 331px; display: inline-block; margin: 15px 30px 15px 0; border: 1px solid #d2d2d2;}
graphic-card img{display: block; width: 101%; max-width: inherit; }
graphic-card > div{padding: 8px 14px; border-top: 1px solid rgba(160,160,160,0.2); position: relative;}
graphic-card > div > b{color:black; display:block; font-size: 20px;}
graphic-card > div > label{display:block; text-transform: uppercase;}
graphic-card > div > a{position: absolute!important; right: 24px; font-size: 13px; line-height: 24px; height: 30px; top: -15px; padding: 3px 8px; background-color: white; border-radius: 20px; color: black;}
graphic-card > div > a > iconify-icon { padding-top: 4px; width: 18.5px; float: left; margin-right: 5px;}

color-palette{height: 120px; display: flex; border: 1px solid #d2d2d2; border-radius: 8px; overflow: hidden;}
color-palette .color-box{display: block; flex-basis: 0; flex-grow: 1; text-align: center; position: relative;}
color-palette .color-box .color-name{background-color: white; height: 28px; display: block; bottom: 0; position: absolute; width: 100%; font-size: 15px; text-transform: uppercase; padding-top: 3px;}

.btn-pdf, .btn-indesign, .btn-ai, .btn-video{font-weight: 400;}
.btn-pdf{background-color: #d32f2f !important} /* red darken-2 */
.btn-indesign{background-color: #c2185b !important} /* pink darken-2 */
.btn-ai{background-color: #f57c00 !important} /* orange-darken-2 */
.btn-video{background-color: #5e35b1 !important} /* deep-purple-darken-1 */

.slider .indicators .indicator-item.active {background-color: #ffb100;}

table .btn-small{min-width: 116px;}