/*
# Project Name        : MHD
# 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-side{padding: 0 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;}
.vertical_space{width: 100%; height: 2em;}
.verticallyCenter{ position: absolute; top:50%; transform: translateY(-60%); width: 100%; }
.tiny_top_margin{margin-top:6px;}

.appWindow{ width: 100%; height: 100%;}
.hideFromUI{ display: none !important;}
.appAside{width: 300px; float: left; height: 100%; background: #ffffff; box-shadow: 0 0 3px #202020; overflow-y: auto;}
#asideTrigger{display: none;}
.appMain{ width: calc( 100% - 300px ); float: left; height: 100%; overflow-y:  auto; }
.appPadding{padding: 1em 3em; width:auto; box-sizing: border-box;}
.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;font-style:italic !important; font-weight: normal !important;}

/* .readonly_field{} */
.readonly_field label{ color: rgba(0,0,0,.51) !important; font-weight: normal !important; }
.readonly_field input{ color: rgba(0,0,0,.51) !important; }
.readonly_field textarea{ color: rgba(0,0,0,.51) !important; }

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

/* login page */
.loginPage{ background-color: #F0F2F4; }
.loginWindow{ width: 100%; height: 100%; display: flex; align-items: center;}
.loginBox{ max-width: 600px; margin: 0 auto;}

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

/* payments page */
.paymentsWindow{ max-width: 1024px; margin: 0 auto; }

/* data grid */
.datagrid h4.ui.header { font-size: 1em;}
.datagrid h4.ui.header .content{ font-size: 1em;}
.data_holder{font-size: 1rem;}

/* dynamic form rows */
.dynamics_rows_wrapper .ui.divider{margin-bottom: 0px;}
/* .bordered .fields{} * /


/* semantic ui over ride */
.ui.dropdown .menu > .header:not(.ui) { color: #1678C2; }
.ui.yellow.message{ color:#624500; background-color: #fff9e1;}
.ui.steps .step .title{font-size: 1em;}
.ui.vertical.steps.noborder{border-width: 0px;}
.ui.vertical.steps.noborder .step{padding: 1em .5em;}
.ui.vertical.steps.noborder .current.step{background: #f3f4f5;}
h4.ui.header{font-size: 1em;}
.ui.table{font-size: 1em;}
.ui.card > .content > .header:not(.ui), .ui.cards > .card > .content > .header:not(.ui) { font-size: 1em; }
.ui.table td.nowrap{white-space:nowrap !important; }
.ui.ui.ui.yellow.label, .ui.yellow.labels .label{ color: #202020; }
.ui.ui.ui.info.label, .ui.info.labels .label{ color: #666; background: #fff3c3;}
.ui.basic.cards > .pale_yellow.card, .ui.basic.pale_yellow.card, .ui.basic.pale_yellow.cards > .card, .ui.cards > .basic.pale_yellow.card{
	background: #fff194;
}
.ui.stickynote.card{border-radius: 0 15px 0 0;}
.ui.inverted.blue.table a{color: #ffffff;}
.ui.inverted.blue.table a:hover{color: #f2f2f2;}

.illustration{ aspect-ratio: 1 / 1; object-fit: contain; }

.alt_ins_logo{width: 100% !important; max-width: 120px !important;}

/* fixed width grid columns */

.ui.column.grid > [class*="twofortypix wide"].column, .ui.grid > .column.row > [class*="twofortypix wide"].column, .ui.grid > .row > [class*="twofortypix wide"].column, .ui.grid > [class*="twofortypix wide"].column{
    width: 240px !important;
}

/* css to implement radio button like option and to link them with the hidden element with the javascript */

.custom-radio-group {
    display: flex;
    gap: 9px;
}
.custom-radio-button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 9px;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
}
.custom-radio-circle {
    width: 16px;
    height: 16px;
    border: 1px solid #9b9b9b;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s;
}
.custom-radio-button.selected .custom-radio-circle {
    background-color: #0080C7;
    border: 1px solid #0080C7;
}

input[type="radio"] {
    display: none;
}


.payment_form button{

    cursor: pointer;
    display: inline-block;
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;
    background: #0080C7;    
    color: #ffffff;
    font-family: Lato,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    margin: 0 .25em 0 0;
    padding: .78571429em 1.5em .78571429em;
    padding-right: 1.5em;
    padding-left: 1.5em;
    text-transform: none;
    text-shadow: none;
    font-weight: 700;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: .28571429rem;
    box-shadow: 0 0 0 1px transparent inset,0 0 0 0 rgba(34,36,38,.15) inset;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    will-change: auto;
}


.ui.card.horizontal > .image > img, .ui.horizontal.cards > .card > .image > img {

    height: 100%;
    object-fit: cover;
}

.slot_card{
    cursor: pointer;
}

.slot_card:hover{
    box-shadow: 0 0px 3px 0 #202020 !important;
}

.break_card{

    background: #fff7ca !important;
    border-color: #ffd147 !important;
    border-width: 1px !important;
    border-style: solid !important;
}

.chosen_card{
    background: #d2ffd2 !important;
    border-color: #0ecd0e !important;
    border-style: solid !important;
    border-width: 1px !important;
}


.taken_card{
    background: #ebebeb !important;
    border-color: rgb(202, 202, 202) !important;
    border-style: solid !important;
    border-width: 1px !important;
}

.taken_card:hover{
    box-shadow:  0 0px 3px 0 #d0d0d0 !important ;
}


@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}


.ui.button.material {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 600;
    box-shadow: 0px 0px #202020;
}

.ui.button.material-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 1.2em;
    width: 2.5em;
    height: 2.5em;
    border-radius: 0.28571429rem; /* Default Fomantic rounding */
}

/* Rounded version */
    .ui.button.material-icon.rounded {
    border-radius: 50% !important;
    padding: 1.5em;
}  


.ui.button.material-icon:hover .material-symbols-rounded {
    animation: bounce 0.3s linear;
}

.ui.button.material:hover .material-symbols-rounded {
    animation: bounce 0.3s linear;
}

/* HD Monitor break point */
@media screen and (max-width: 1366px) {

	body{ font-size:16px; }
    .appAside{width: 240px;}
    .appMain{ width: calc( 100% - 240px );}
    .appPadding{ padding: 0em 1em;}
}

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

    .appAside{width: 210px;}
    .appMain{ width: calc( 100% - 210px );}
}

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

    .appAside{ position: absolute; z-index: 99; display: none; width: calc( 100% - 99px ); }
    #asideTrigger{ display: inline-flex; }
    .appMain{width: 100%;}
    .appPadding{padding: 1em .5em;}
    .appMainContent .submenu_trigger_menu{display: inherit !important;}
    .pc_only_submenu{display: none; visibility: hidden;}
    .mobileOnly{display: block;}
    .pcOnly{display: none;}
}

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

}

/* css for print */
@media print {

    .appAside{ display: none;}
    .appMain{ float: none; width: auto; height: auto;}
    header{ display: none;}
    footer{ display: none;}
}