@import "root.css" ;
@import "font_definitions.css" ;
@import "global_styles.css" ;

* { box-sizing: border-box; }

.overlay {
   visibility: hidden;
   opacity: 0;
}

body {
   position: relative;
}

#warning-message-overlay {
   width: 70px;
   height: 70px;
   z-index: 100;
   position: absolute;
   bottom: 16px;
   right: 16px;
   border-radius: 70px;
   background-color: white;
   border: 2px solid var(--gray-light-color);
   display: none;
   justify-content: center;
   align-items: center;
   padding: 12px;
   transition: all 300ms ease-in-out;
}

#warning-message-overlay i {
   color: var( --red-color );
   z-index: 101;
   transition: all 300ms ease-out;
   font-size: 1.75em;
   line-height: 1.75em;
}

#warning-message-overlay #warning-message-cont {
   display: none;
   opacity: 0;
   transition: all 300ms ease-out;
   transition-delay: 300ms;
   margin-left: 16px;
   font-size: 16px;
   line-height: 22px;
   font-family: Lato, sans-serif;
   flex-direction: column;
}

#warning-message-overlay #warning-message-cont h3 {
   margin-top: 0;
   font-weight: bold;
}

#warning-message-overlay.show {
   display: flex;
   cursor: pointer;
}

#warning-message-overlay.show:hover {
   width: 500px;
   height: 200px;
   border-radius: 8px;
   justify-content: flex-start;
   align-items: center;
}

#warning-message-overlay.show:hover i {
   /*font-size: 1.25em;*/
   /*line-height: 1.25em;*/
}

#warning-message-overlay.show:hover #warning-message-cont{
   opacity: 1;
   transition-delay: 300ms;
}

.overlay.modal-open,
.overlay.drawer-open {
   height: 100%;
   width: 100%;
   position: fixed;
   z-index: 3000;
   left: 0;
   top: 0;
   background-color: var( --purple-dark-color );
   visibility: visible;
   opacity: 0.75;
   overflow-x: hidden;
   display: block;
}

.overlay.drawer-open { transition: all ease-in-out .25s; }

body
   {
   padding:           0 ;
   margin:            0 ;
   width:             100vw ;
   min-width:         880px ;
   height:            100vh ;
   min-height:        968px ;

   background-color:  var( --bright-white-color ) ;

   display:           flex ;
   flex-direction:    column ;
   overflow-y:          auto ;
   overflow-x: hidden;

   font-family:       LatoRegular, sans-serif ;
   font-size:         calc( 14 * var( --font-zoom-factor ) ) ;
   line-height: 1!important;
   }

#top-container
   {
   width:             100% ;
   height:            calc( 100 * var( --zoom-factor ) ) ;

   flex-grow:         0 ;
   flex-shrink:       0 ;
   display:           flex ;
   flex-direction:    row ;
   justify-content:   space-between ;
   background-color:  #ffffff ;
   /*overflow:          hidden ;*/
   }


body > #main-container
   {
   width:             100% ;
   height:            calc( 100vh - calc( 100 * var( --zoom-factor ) ) ) ;
   flex-grow:         1 ;
   display:           flex ;
   flex-direction:    row ;
   }



   /********** TOP CONTAINER **********/

#top-container > .logo
   {
   flex-grow:           0 ;
   flex-shrink:         0 ;
   width:               calc( 165 * var( --zoom-factor ) ) ;
   height:              calc(  60 * var( --zoom-factor ) ) ;
   margin:              calc(  20 * var( --zoom-factor ) ) ;
   }


#top-container > #navigation-links
   {
   flex-grow:           1 ;
   flex-shrink:         1 ;
   display:             flex ;
   flex-direction:      row ;
   justify-content:     center ;
   margin-top:          calc( 50 * var( --zoom-factor ) ) ;
   font-family:         Lato, sans-serif ;
   font-weight:         bold ;
   font-size:           1.4em ;
   color:               var( --deep-purple-color ) ;
   }

#top-container > #navigation-links a
   {
   color:               var( --medium-purple-color ) ;
   text-decoration:     none ;
   }

#top-container > #navigation-links > #separator
   {
   color:               var( --medium-gray-color ) ;
   margin-left:         calc( 10 * var( --zoom-factor ) ) ;
   margin-right:        calc( 10 * var( --zoom-factor ) ) ;
   }


#top-container > #logged-in-user
   {
   flex-grow:           0 ;
   flex-shrink:         0 ;
   display:             flex ;
   flex-direction:      row ;
   align-items:         flex-end ;
   justify-content:     flex-end ;
   width:               calc( 165 * var( --zoom-factor ) ) ;
   height:              calc(  60 * var( --zoom-factor ) ) ;
   margin:              calc(  20 * var( --zoom-factor ) ) ;
   /*position:            relative;*/
   /*z-index:             20;*/
   }

#top-container > #logged-in-user > #avatar
   {
   flex-grow:           0 ;
   flex-shrink:         0 ;
   width:               calc( 50 * var( --zoom-factor ) ) ;
   height:              calc( 50 * var( --zoom-factor ) ) ;
   border-radius:       calc( 25 * var( --zoom-factor ) ) ;
   text-align:          center ;
   border:              1px solid var( --light-purple-color ) ;
   margin-top:          calc( 10 * var( --zoom-factor ) ) ;
   cursor:              pointer;
   }

#top-container > #logged-in-user > #avatar > #initials
   {
   text-align:          center ;
   font-family:         ZillaSlabBold, sans-serif ;
   font-size:           1.7em ;
   color:               var( --medium-purple-color ) ;
   margin-top:          calc( 10 * var( --zoom-factor ) ) ;
   }

#top-container > #logged-in-user > #user-name
   {
   font-family:         LatoBold, sans-serif ;
   font-size:           0.8em ;
   text-align:          right ;
   color:               var( --medium-purple-color ) ;
   margin-right:        5px ;
   }

   /******************************************************************************/
   /*                                                                            */
   /*                               ERROR PAGE                                   */
   /*                                                                            */
   /******************************************************************************/

#error-page-background
   {
   display:                flex ;
   flex-direction:         row ;
   background-image:       linear-gradient( to bottom, var( --medium-purple-color ), var( --deep-purple-color ) ) ;
   width:                  100% ;
   height:                 100% ;
   justify-content:        center ;
   align-items:            center ;
   }

#error-page-box
   {
   display:                flex ;
   flex-direction:         column ;
   align-items:            center ;
   width:                  calc( 600 * var( --zoom-factor ) ) ;
   height:                 calc( 500 * var( --zoom-factor ) ) ;
   background-color:       var( --off-white-color ) ;
   border:                 1px solid var( --deep-purple-color ) ;
   }

#error-page-TITLE
   {
   margin:                 calc( 30 * var( --zoom-factor ) ) ;
   font-family:            OpenSansBold, sans-serif ;
   font-size:              2rem ;
   color:                  var( --light-gray-color ) ;
   flex-grow:              0 ;
   flex-shrink:            0 ;
   }

#error-page-MESSAGE
   {
   flex-grow:              1 ;
   flex-shrink:            1 ;
   display:                flex ;
   flex-direction:         column ;
   overflow:               hidden ;
   }

#error-page-MESSAGE-message
   {
   font-family:            OpenSansBold, sans-serif ;
   font-size:              1.1rem ;
   flex-grow:              0 ;
   flex-shrink:            0 ;
   }

#error-page-MESSAGE-details
   {
   font-family:            OpenSansRegular, sans-serif ;
   font-size:              0.95rem ;
   flex-grow:              1 ;
   flex-shrink:            1 ;
   margin-top:             calc( 20 * var( --zoom-factor ) ) ;
   }

#error-page-MESSAGE-exception
   {
   font-family:            OpenSansRegular, sans-serif ;
   font-size:              0.85rem ;
   flex-grow:              1 ;
   flex-shrink:            1 ;
   margin-top:             calc( 20 * var( --zoom-factor ) ) ;
   overflow-y:             auto ;
   }

#error-page-BUTTONS
   {
   flex-grow:              1 ;
   flex-shrink:            1 ;
   margin-top:             calc( 30 * var( --zoom-factor ) ) ;
   }

#billing-root {
   width: 100%;
}

@media all and (max-width: 880px) {
   body {
      overflow-x: auto;
   }
}