/*
# Project Name        : Chemical Usage Monitoring System
# Version             : 1.0
# Developed by        : Indian Institute Of Science Education and Research Thiruvananthapuram
# Language            : PHP
# Architecture        : MVC
# Software Dev Method : Agile
# File Name           : master.css
# File Type           : stylesheet
# File Location       : assets/styles/
# File Author         : Packiya Rajan S
*/

/* tags */
html{width: 100%;height: 100%;}
body{
    width: 100%;height: 100%;
    background: linear-gradient( to bottom right, #CBC265, #D3AEA4, #D79EAE, #C479D0, #9B92DE, #8CC3E2, #86CEE3 );
}
a:hover { color: #B457D1; }

/* login positioner */
.login_vertical_positioner{ width: 100%; height: auto; top: 27%; position: absolute; }
.login_vertical_margin{  background: rgba( 255, 255, 255, 0.90 ); margin: 1em 2em; border-radius: 6px;box-shadow: 0 0 5px #202020; }
.login_vertical_divider{height: calc(100% - 2em); border-left: 1px solid rgba(34,36,38,.15);width: 1px;position: absolute;padding: 0 !important;top: 1em;left: 50%;}
.login_brand_container{margin: 2em 0;}
.login_brand_logo{ text-align: center;font-size: 45px;font-family: 'HEX:gon Regular'; margin: 0; color: #c86fce;}
.login_brand_name{ text-align: center; margin: 0; }
.login_brand_name > span::first-letter{ color: #4294ff !important; }
.login_brand_company{ text-align: center; color: #3b91d3; }
.login_button_container{ margin: 4em 0; }

/* general margins */
.margin_auto{ margin-left: auto; margin-right: auto; display: table;}
.vertical_spacer{ width: 100%; height: 30px; }
.text_center{text-align: center;}
.no_margin{ margin:0 !important; }
.text_right{text-align: right !important;}

/* layouts */
.cums_cotainer{ width: 100%; height: 100%; display: block;}
.cums_sidebar{ height: 100%; width: 300px; box-shadow: 0 0 5px black;float: left;background: #ffffff; overflow-x: auto;}
.cums_pusher{ height: 100%; width: calc(100%-210px);box-sizing: border-box;overflow-x: auto;}
.cums_sidebar_trigger{ width: auto; height: auto; position: absolute; top:0; left: 210px; background: #ffffff; box-shadow: 1px 1px 6px #454545; display: none; border-radius: 0px 0px 9px; }
.cums_sidebar_trigger > a{padding: 12px; display: inline-block;}
.cums_sidebar_brand_container{margin: 1em 0;}
.cums_sidebar_brand_logo { text-align: center;font-size: 45px;font-family: 'HEX:gon Regular'; margin: 0; color: #c86fce; }
.cums_side_menu_container{ margin: 12px; }
.cums_sidebar_footer_note{ margin: 12px; text-align: center;font-size: 12px;}

.cums_main_container{ margin: 1em; background: rgba( 255, 255, 255, 0.90 ); width: auto; min-height: 450px; height: auto; box-shadow: 0 0 3px #555555; border-radius: 12px; padding: 1em; }

/* semantic override */
.cums_side_menu_container .ui.vertical.menu .menu .item{font-size: 1em;}
.cums_side_menu_container .ui.vertical.menu .item > .header:not(.ui) {font-size: 1.1em; }
.cums_pageination > div.item {padding: 0 !important;}
.cums_pageination > div.active.item {padding: .92857143em 1.14285714em !important;}
.cums_pageination > div.item > a { display: inline-block; padding: .92857143em 1.14285714em; }
.table a{ color: #B457D1; }
.table .negative a{ color: #9f3a38; }
.table .negative a:hover { color: #202020 !important; }
.table .positive a{ color: #2c662d; }
.table .positive a:hover { color: #202020 !important; }
.ui.card > .extra a:not(.ui):hover, .ui.cards > .card > .extra a:not(.ui):hover { color: #B457D1; }
.ui.bulleted.list > .item{ line-height: 1.5em;}
.ui.ordered.list > .item{ line-height: 1.5em;}


@media screen and (max-width: 767px) {

    /* for mobile devices */
    .login_vertical_positioner{top:12%;}
    .login_vertical_divider{height: 1px;width: 100%;position: static;border-bottom: 1px solid rgba(34,36,38,.15);}
    .login_brand_container{margin: 0;}
    .login_button_container{margin: 0;}

    /* layouts */
    .cums_pusher{ width: 100%; padding-top: 2em;overflow-y: auto;}
    .cums_sidebar{ position: absolute; z-index: 99; display: none; }
    .cums_sidebar_trigger{display: block; left: 0; }
    .cums_sidebar_trigger{ z-index: 98; }

    table td.text_right{ text-align: left !important; }

}