/* Caerus Core version 1 */
/* New Light Design 2022 */


/* Imports */

@import "caerus_vars_fonts.css";


/* Page Layout */

body{
   width: 100vw;
   height: auto;
   overflow: hidden;
   overflow-y: scroll;
   margin: 0;
   z-index: 1;
}

.sl_container{
   width: 960px;
   margin: auto;
   position: relative;
}

.sl_container_flex{
   width: 100%;
   display:flex;
   justify-content: space-between;
   align-items: stretch;
   flex-wrap: wrap;
}

.sl_layout_twothird{
   width: 624px;
   height: auto;
}

.sl_layout_full{
   width: 944px;
   height: auto;
   display: flex;
}

.sl_layout_onethird{
   width: 304px;
   height: auto;
}

.sl_grid {
   display: grid;
   width: 100%;
   grid-template-columns: 300px 300px 300px;
   grid-gap: 24px;
}




/* Typography */

a{
   color: var(--ink);
   text-decoration: none;
}

.sl_text{
   font-family: light;
   float: left;
   text-align: left;
   font-family: Light;
   letter-spacing: -1px;
   font-size: 16pt;
   line-height: 24pt;
}

.light{
   font-family: Extralight;
}

.bold{
   font-family: bold;
}

.t_16pt{
   font-size: 16px;
}

.t_24pt{
   font-size: 24px;
}

.sl_h1{
   font-size: 48px;
   font-family: Bold;
   margin-bottom: 32px;
}

.sl_h2{
   font-size: 24px;
   font-family: Regular;
   margin-bottom: 16px;
   width: 100%;
}

.sl_menu_option{
   height: 48px;
   width: 100%;
   display: flex;
   align-items: center;
   font-size: 24px;
}




/* Menubar */

.sl_menubar{
   width: 100%;
   height: 64px;
   margin-bottom: 96px;
   top: 0;
   position: sticky;

   background: var(--snow);
   border-radius: 0 0 12px 12px;

   display: flex;
   justify-content: space-between;

   z-index: 3;
}

.sl_menubar_logo{
   width:130px;
   height: 26px;
   margin-left: 20px;
   margin-top: 19px;
   background-image: url(/assets/branding/sl_logo.svg);
}

.sl_menubar_user{
   margin-right: 16px;
   margin-top: 16px;
   height: 32px;
   width: 32px;

   background-image: url(/assets/UI/Misc/icon_user.svg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

   border-radius: 50%;

   cursor: pointer;
}

.sl_menubar_userwindow_container{
   position: absolute;
   width: 300px;
   height: auto;
   padding: 24px;
   background-color: var(--snow);
   right: 0px;
   top: 80px;
   border-radius: 12px;
   display: none;
   z-index: 3;
}


/* Forms */

form{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

label{
   width: 100%;
   height: 27px;
   border-radius: 8px;
   border: solid 3px;
   border-color: rgba(0,0,0,0);
   background-color: var(--snow);
   position: relative;
   display: inline-block;

   z-index: 2;

   font-smooth: always;
   font-family: Light;
   letter-spacing: -0.5px;
   font-size: 16pt;
   line-height: 16pt;
   text-align: center;
   padding-top: 5px;

   cursor: pointer;
}

input[type="radio"]{
   opacity: 0;
   position: fixed;
   width: 0;
}

.sl_fileupload{
   display: none;
}

.sl_form_titlebar{
   width: 100%;
   height: auto;
   margin-bottom: 48px;
   display: flex;
   justify-content: space-between;
   flex-shrink: 0;
}

.sl_form_button_container{
   width: 304px;
   display: flex;
   justify-content: space-between;
}

.sl_textinput{
   width: 100%;
   max-width: 464px;
   height: 32px;
   margin-bottom: 16px;
   padding: 4px 16px 4px 16px;

   border-radius: 8px;
   border: none;
   background-color: var(--snow);

   overflow:visible;

   font-family: Thin;
   letter-spacing: -0.5px;
   font-size: 18pt;
   line-height: 18pt;

   display:block;

   flex-shrink: 1;
}

.sl_textinput_container{
   width: 100%;
   display: flex;
   max-width: 496px;
}

.sl_text_big{
   width: 100%;
   height: 250px;
}

.sl_formgrid_fourth{
   width: 304px;
   display: grid;
   grid-template-columns: 64px 64px 64px 64px;
   column-gap: 16px;
   row-gap: 16px;
   margin-bottom: 64px;
}

.sl_formgrid_fourth input[type="radio"]:checked + label {
   border-color: var(--green);
}

.sl_form_fourths{
   justify-self: stretch;
}

.sl_formgrid_full{
   width: 304px;
   display: grid;
   grid-template-columns: 304px;
   column-gap: 0px;
   row-gap: 16px;
   margin-bottom: 64px;
}

.sl_form_fulls{
   justify-self: stretch;
}

.sl_formgrid_full input[type="radio"]:checked + label {
   border-color: var(--green);
}

.sl_button{
   width: 144px;
   height: 24px;
   background-color: var(--stone);
   border-radius: 8px;

   color: var(--snow);
   font-size: 16pt;
   font-family: Regular;

   padding-top: 4px;
   padding-bottom: 4px;
   align-items: center;
   justify-content: center;

   display: flex;
   text-decoration: none;
   border: solid 3px;
   border-color: rgba(0, 0, 0, 0);

   cursor: pointer;
}

.btn_blue{
   background-color: var(--blue) !important;
}

.btn_red{
   background-color: var(--red) !important;
}

.btn_green{
   background-color: var(--green) !important;
}

.sl_button_input{
   display: none;
}

.sl_button_dot{
   width: 40px;
   height: 40px;
   margin-left: 16px;
   flex-shrink: 0;
   border-radius: 8px;
   background-color: var(--snow);
}

.sl_portal_property_container{
   width: 100%;
   height: auto;
   margin-bottom: 48px;
}

.sl_portal_property_options{
   width: 100%;
   height: auto;

   display:flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 18px;
}


/* Dialog box */

.sl_popup_container{
   width: 100vw;
   height: 100vh;
   top: 0;
   position: fixed;
   background-color: rgba(0, 0, 0, 0.2);
   z-index: 4;
   display: none;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
}

.sl_popup_popup{
   width: 336px;
   padding: 32px;
   background-color: white;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 16px;
   height: auto;
}

.sl_popup_title_container{
   width: 100%;
   height: 32px;
   margin-bottom: 16px;
   display: flex;
}

.sl_popup_title_icon{
   width: 32px;
   height: 32px;
   background-image: none;
   background-repeat: no-repeat;
   background-size: contain;
   margin-right: 16px;
}

.sl_popup_text_container{
   width: auto;
   height: auto;
   display: flex;
   margin-bottom: 16px;
}

.sl_popup_button_container{
   height: 38px;
   display: flex;
   width: 100%;
   flex-direction: row-reverse;
   justify-content: space-between;
}


/* Login Page */

.sl_loginbody {
   width:100vw;
   height:100vh;
   position: relative;
   margin: 0;
}

.sl_logincontainer {
   width: 500px;
   position: relative;
   top: 50%;
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   padding: 20px;
   overflow: visible;
}

.sl_loginlogo {
   width: 250px;
   height: 81px;
   background-image: url(/assets/branding/sl_caerus_logo.svg);
   background-repeat: no-repeat;
   position: relative;
   margin-bottom: 96px;
}

.sl_loginbutton {
   width: 38px;
   height: 38px;
   background-color: var(--green);
   border: none;
   border-radius: 8pt;
   
   float: right;
   position: relative;
   overflow: visible;
   cursor: pointer;
}

.sl_loginarrowright {
   width: 20px;
   height: 20px;
   background-image: url(/assets/branding/icons/sl_icon_arrow_right_light.svg);
   position: relative;
   top: 50%;
   left: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}


/* Manage Users */

.sl_user_container{
   width: auto;
   height: 87px;
   display: flex;
   flex-direction: row;
   align-items: center;
}

.sl_user_image{
   width: 87px;
   height: 87px;
   flex-grow: 0;
   flex-shrink: 0;
   background-image: none;
   background-size: cover;
   border-radius: 50%;
   background-color: var(--snow);
   background-position: center;
}

.sl_user_stack{
   width: auto;
   height: 80px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   margin-left: 26px;
}

.sl_user_buttons{
   width: auto;
   height: auto;
   display: flex;
}