/*
# Project Name        : Room Booking System
# Version             : 1.0
# Developed by        : IISER Thiruvananthapuram
# Language            : PHP
# Architecture        : MVC
# Software Dev Method : Agile
# File Name           : master.css
# File Type           : css file
# File Location       : assets/styles
# File Author         : Packiya Rajan S

*/

html{ width: 100%; height: 100%; }
body{ width: 100%; height: 100%; font-size: 16px; margin: 0; padding: 0; background: #F0F2F4;}


.margin{margin: 1em;}
.padding{padding: 1em; width: auto; box-sizing: border-box;}
.padding-mini{padding: .6em;}
.padding-none{padding: 0 !important;}
.margin-auto{margin: 1em auto;}
.margin-none{margin: 0 !important;}
.nomargin{margin: 0 !important;}
.nopadding{padding: 0 !important;}
.no-top-padding{ padding-top: 0 !important;}
.verticacSpace{width: 100%;height: 2em;}
.verticallyCenter{ position: absolute; top:50%; transform: translateY(-60%); width: 100%; }

.appWindow{ width: 100%; height: 100%;}
.hideFromUI{ display: none !important;}
.appAside{width: 270px; float: left; height: 100%; background: #ffffff; box-shadow: 0 0 3px #202020; overflow-y: auto;}
#asideTrigger{display: none;}
.appMain{ width: calc( 100% - 270px ) float: left; height: 100%; overflow-y:  auto; }
.appMainContent{width: auto; height: auto; min-height: 360px;}
.appMainContent .form_file_field { display: none; }
.appMainContent .submenu_trigger_menu{display: none !important;}
.mobileOnly{display: none;}
.pcOnly{display: block;}
.model_iframe{ width: 100%;min-height:300px;border-width: 0px;border-style: solid;}
.overflown{ overflow-x: auto; overflow-y: auto; }
.value_highlight{ background-color: #f4e175; padding: 4px 8px; border-radius: 3px; }
.readonly_label{ border-width: 0px !important;}


.xoverflown{ width: 100%; margin: 0 auto; overflow-x: auto; height: auto; }
.yoverflown{ width: 100%; margin: 0 auto; overflow-y: auto; height: auto; }

/* timeline */
.timeline_container{width:100%; height:auto;display:flex;}
.timeline_static_left{width:120px; height: auto;float:left;}
.timeline_static_left table td, .timeline_static_left table th { border-color:rgba(0,0,0,.1); border-width: 0 1px 0 0; border-style: solid; }
.timeline_right{width: calc(100% - 120px); height:auto; float: left;}

.timeline_table thead{ display: block; width: 100%; }
.timeline_table thead tr{width: 100%; display: flex;}
.timeline_table thead th{width: 119px;}
.timeline_table tbody{ display: block; width: 100%; height: auto; max-height: 580px; overflow-y:auto; }
.timeline_table tbody tr{width: 100%; display: flex;}
.timeline_table tbody td{width: 119px;}

/* semantic over ride */
.ui.primary.message{ color: rgba(0,0,0,.87) !important; }
.ui.blue.slider .inner .thumb { background: #f2f2f2 linear-gradient(transparent,rgba(33,133,208,1)) !important; }
.ui.yellow.message { color : #4f3905 !important; }
.ui.toggle.checkbox label::after{ background: #f2f2f2 linear-gradient(transparent,rgba(33,133,208,1)) !important; }
.ui.toggle.checkbox label::before{ box-shadow:  0px 0px 1px #000 inset !important }
.ui.toggle.checkbox input:focus:checked~label::before { background-color: #9dc2dd !important; }
.ui.toggle.checkbox input:checked~label::before { background-color: #9dc2dd !important; }
.ui.red.message{ color: #bf0000; }
.ui.table td.nowrap{white-space:nowrap !important; }

/* login page */
.loginPage{ background-color: #F0F2F4; }
.loginWindow{ max-width: 600px; margin: 0 auto;}

/* google sign in */
#google_signin_button{ margin : 0 auto; display: table;}

.guidelines_list > .item { font-size: 14px !important; line-height: 1.5em !important; padding: 12px 6px 12px 18px !important; }
.nowrap{white-space: nowrap;}

/* tablet break point */
@media screen and (max-width: 767px) {

    .appAside{ position: absolute; z-index: 99; display: none; }
    #asideTrigger{ display: inline-flex; }
    .appMain{width: 100%;}
    .appMainContent .submenu_trigger_menu{display: inherit !important;}
    .pc_only_submenu{display: none; visibility: hidden;}
    .mobileOnly{display: block;}
    .pcOnly{display: none;}
}

/* mobile break point */
@media screen and (max-width: 480px) {

}