﻿body { max-width: 100% !important; }

.disabled { pointer-events: none; opacity: 0.5; }
.fc-daygrid-event:hover { cursor:pointer; }

/****Calendar*****/
.calendar_section { position: relative; }
    .calendar_section .left_bg { position: absolute; left: -50px; top: 400px; }
    .calendar_section .right_bg { position: absolute; right: -50px; top: 250px; }
.calendar { padding-top: 50px; max-width: 1200px; margin: 0 auto; width: 100%; }

.tutorial_item { box-shadow: 0px 19px 22px #00000029; position: fixed; top: 10px; width: 100%; max-width: 451px; margin: 0 auto; left: 0; right: 0; background-color: #F9F9F9; padding: 30px 0 0 0; box-sizing: border-box; color: #4D4F5C; z-index: 5; border-radius: 10px; overflow-y: auto; max-height: 800px; }
    .tutorial_item .close_tutorial { position: absolute; left: 5px; top: 5px; font-size: 1.5em; }
    .tutorial_item .tutorial_main_details { padding: 10px; box-sizing: border-box; }
        .tutorial_item .tutorial_main_details .title { display: block; font-size: 1.2em; font-weight: 500; margin-bottom: 24px; }
        .tutorial_item .tutorial_main_details > ul { }
            .tutorial_item .tutorial_main_details > ul > li { margin-bottom: 25px; }
                .tutorial_item .tutorial_main_details > ul > li:last-child { margin-bottom: 0; }
                .tutorial_item .tutorial_main_details > ul > li > img { display: inline-block; vertical-align: middle; margin-left: 5px; }
                .tutorial_item .tutorial_main_details > ul > li > span { display: inline-block; vertical-align: middle; }
    .tutorial_item .tutorial_extra_details { background-color: #F3F3F3; padding: 10px; box-sizing: border-box; }
        .tutorial_item .tutorial_extra_details > p { display: block; font-size: 1.15em; margin-bottom: 25px; }
        .tutorial_item .tutorial_extra_details > div { }
            .tutorial_item .tutorial_extra_details > div > img { margin-left: 5px; }
            .tutorial_item .tutorial_extra_details > div > span { margin-left: 5px; }
            .tutorial_item .tutorial_extra_details > div > .button3 { border-radius: 5px; background-color: #FF6565; color: #fff; padding: 5px; box-sizing: border-box; }
        .tutorial_item .tutorial_extra_details form { display: none; padding: 10px 0; box-sizing: border-box; }
            .tutorial_item .tutorial_extra_details form > ul { }
                .tutorial_item .tutorial_extra_details form > ul > li { margin-bottom: 10px; position:relative; }
                    .tutorial_item .tutorial_extra_details form > ul > li .field-validation-error { top: 22px;}
                        .tutorial_item .tutorial_extra_details form > ul > li .field-validation-error.file_valid { width:100% !important;right:0;text-align:center;top:initial;bottom:-10px;}
                    .tutorial_item .tutorial_extra_details form > ul > li > label { display: block; margin-bottom: 2px; }
                    .tutorial_item .tutorial_extra_details form > ul > li > input { padding: 10px; color: #4D4F5C; font-size: 1.2em; display: block; width: 100%; box-shadow: 0px 2px 6px #00000026; border: 1px solid #4D4F5C; background-color: #fff; }
            .tutorial_item .tutorial_extra_details form.active_user > ul > li > input { padding: 10px 0; box-shadow: none; border: none; background-color: transparent; pointer-events: none; }
.tel_item {justify-content:space-between; }
.tel_item input, .tel_item select { padding: 10px;width:100%; color: #4D4F5C; font-size: 1.2em; display: block; width: 100%; box-shadow: 0px 2px 6px #00000026; border: 1px solid #4D4F5C; background-color: #fff; }
    .tel_item select {direction:ltr; }
    .tel_item .select_item { width: 80px; }
    .tel_item .tel_input { width: calc(100% - 90px); }
    .tutorial_item .button4 { display: block; max-width: 185px; width: 100%; margin: 0 auto; border: 1px solid #0062FF; border-radius: 4px; background-color: #3B86FF; color: #fff; padding: 10px; box-sizing: border-box; font-size: 1.3em; }
    .tutorial_item .file_conti { text-align: center; margin-top: 10px; margin-bottom: 23px; }
    .tutorial_item form.active_user .active_user_not_disply { display: none; }
    .tutorial_item .file_conti > div { cursor: pointer; position: relative; display: inline-block; }
        .tutorial_item .file_conti > div > input { position: absolute; width: 100%; height: 100%; right: 0; top: 0; cursor: pointer; opacity: 0; }
        .tutorial_item .file_conti > div > span { display: block; padding: 3px 5px; box-sizing: border-box; border: 1px solid #4D4F5C; border-radius: 4px; background-color: #C6C6C6; pointer-events: none; }
            .tutorial_item .file_conti > div > span > img { display: inline-block; vertical-align: middle; }
            .tutorial_item .file_conti > div > span > span { display: inline-block; vertical-align: middle; color: #fff; font-size: 0.9em; }
        .tutorial_item .file_conti > div > input:hover ~ span, .tutorial_item .file_conti > div > input:focus ~ span { background-color: #0062FF; }
    .tutorial_item .success_message { text-align: center; padding: 20px 0 0 0; box-sizing: border-box; }
        .tutorial_item .success_message > img { display: inline-block; }
        .tutorial_item .success_message > h2 { display: block; text-align: center; font-weight: 300; margin-bottom: 10px; font-size: 1.2em; }
        .tutorial_item .success_message > div { font-size: 1.2em; line-height: 120%; margin-bottom: 25px; }
        .tutorial_item .success_message > span { }
        .tutorial_item .success_message > strong { font-weight: 500; }
        .tutorial_item .success_message .button4 { margin-bottom: 10px; }
        .tutorial_item .success_message .cancel { font-size: 0.9em; font-weight: 300; display: inline-block; text-decoration: underline; }
.fc-daygrid-event.active::after { content: ""; width: 22px; height: 22px; background: url('/Content/Resources/Calendar/check.png'); background-position: center center; background-repeat: no-repeat; position: absolute; right: -5px; top: -5px; }
/****End Calendar*****/

.calendar_main_section .left_bg { top: 200px; }
.calendar_main_section .right_bg { top: 100px; }
.log_or_tutorial {position:relative;z-index:2; width: 100%; max-width: 700px; margin: 0 auto; padding-top: 250px; min-height: 611px; box-sizing: border-box; }
    .log_or_tutorial > ul { }
        .log_or_tutorial > ul > li { width:48%;}
            .log_or_tutorial > ul > li > a { display: block;text-align:center; background-color: #F4F7FC; box-shadow: 0px 3px 6px #00000029; border-radius: 10px; padding: 10px 5px; box-sizing: border-box; }
                .log_or_tutorial > ul > li > a > img {display:inline-block;vertical-align:middle;margin-left:10px; }
                .log_or_tutorial > ul > li > a > span { display:inline-block;vertical-align:middle;font-size:1.2em;font-weight:600;}
                .log_or_tutorial > ul > li > a:hover, .log_or_tutorial > ul > li > a:focus { background-color: #C6C6C6; }

@media only screen and (max-width : 700px) {
    .log_or_tutorial > ul > li > a > img {width:30px;display:block;margin:0 auto 5px auto;}
}


@media only screen and (max-width : 600px) {
    .tutorial_item {position:fixed;top:10px;max-width:95%;margin:0 auto;right:0;left:0;max-height:600px;}
}
