/***********************************************************************************************************************/ 
/**                                 PANORONE® - CENTRAL FACILITY MANAGEMENT SYSTEMS                                   **/
/***********************************************************************************************************************/
/**                           by DONE MUHENDISLIK YAZILIM-BILISIM & DANISMANLIK HIZMETLERI                            **/
/***********************************************************************************************************************/
/***********************************************************************************************************************/
/** COPYING,SHARING,MODIFYING*EDITING,RE-SELLING and*or PUBLISHING THIS FILE IS FORBIDDEN. ALL RIGHTS RESERVED © 2026 **/
/***********************************************************************************************************************/
/** FILE : style_tablet_portrait.css                                                                                  **/
/** SOURCE : project                                                                                                  **/
/***********************************************************************************************************************/

/************************************************************************/
/* Tablet Set - Portrait */
@media screen and (min-width: 503px) and (max-width: 1024px) and (orientation: portrait) {
	html {
		background-color: #181818;
		padding: 0;
		margin: 0;
	}

	body {
		/*height: 100vh;*/
		min-height: 100dvh;
		background-color: #53FCCB;
		background: linear-gradient(-45deg, #53FCCB, #226954, #0f2f26, #181818);
		background: -moz-linear-gradient(-45deg,#53FCCB 0%, #226954 33%, #0f2f26 66%), #181818 90;
		background: linear-gradient(-45deg,rgba(83, 252, 203, 1) 0%, rgba(34, 107, 86, 1) 33%, rgba(24, 24, 24, 1) 66%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#53FCCB",endColorstr="#181818",GradientType=0);
        background-size: 400% 400%;
        -webkit-animation: gradient_anim 5s ease infinite;
        animation: gradient_anim 5s ease infinite;
		font-size: 16px;
		scroll-behavior: smooth;
		overflow-x: hidden;
		margin: 0;
		padding: 0;
	}

	#desktop_detector {
		display: none;
	}

	.space_hor {
		width: 100%;
		height: 2.4vw;
	}

	.space_button_form {
		width: 100%;
		height: 5vw;
	}

	/********************************************/
	/** ROTATE SCREEN **/
	#rotate_screen_container {
		position: fixed;
		z-index: 1000;
		overflow: hidden;
        width: 100%;
        height: 100%;
		min-height: 100dvh;
        background: linear-gradient(-45deg, #53FCCB, #226954, #0f2f26, #181818);
		background: -moz-linear-gradient(-45deg,#53FCCB 0%, #226954 33%, #0f2f26 66%), #181818 90;
		background: linear-gradient(-45deg,rgba(83, 252, 203, 1) 0%, rgba(34, 107, 86, 1) 33%, rgba(24, 24, 24, 1) 66%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#53FCCB",endColorstr="#181818",GradientType=0);
        background-size: 400% 400%;
        -webkit-animation: gradient_anim 5s ease infinite;
        animation: gradient_anim 5s ease infinite;
        display: none;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	#rotate_screen_container > #rotate_screen_image_container {
		position: relative;
		overflow: hidden;
        width: 100%;
        height: 50%;
        /*background: rgba(0,0,0,1);*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	#rotate_screen_container > #rotate_screen_image_container > img {
		object-fit: contain;
		width: 100%;
		height: 100%;
	}

	#rotate_screen_container > #rotate_screen_text_container {
		position: relative;
		overflow: hidden;
		margin-top: 1%;
        width: 100%;
        height: auto;
        /*background: rgba(0,0,0,1);*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
		text-align: center;
	}

	#rotate_screen_container > #rotate_screen_text_container > font {
		font-family: 'RobotoBold', Arial, sans-serif;
        font-size: 1.2vw;
        color: #ffffff;
		text-decoration: none;
	}
	/** END OF ROTATE SCREEN **/
	/********************************************/
	
	/********************************************/
	/********************************************/
	/********************************************/
	/********************************************/

	/********************************************/
	/** LOADING SCREEN **/
	#loading_screen_container {
		position: fixed;
		z-index: 2;
		overflow: hidden;
        width: 100%;
        height: 100%;
        min-height: 100dvh;
		background-color: #53FCCB;
		background: linear-gradient(-45deg, #53FCCB, #226954, #0f2f26, #181818);
		background: -moz-linear-gradient(-45deg,#53FCCB 0%, #226954 33%, #0f2f26 66%), #181818 90;
		background: linear-gradient(-45deg,rgba(83, 252, 203, 1) 0%, rgba(34, 107, 86, 1) 33%, rgba(24, 24, 24, 1) 66%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#53FCCB",endColorstr="#181818",GradientType=0);
        background-size: 400% 400%;
        -webkit-animation: gradient_anim 5s ease infinite;
        animation: gradient_anim 5s ease infinite;
		font-size: 16px;
		scroll-behavior: smooth;
		overflow-x: hidden;
		margin: 0;
		padding: 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	#loading_screen_container > #loading_image_container {
		position: relative;
		overflow: hidden;
        width: 80%;
        height: auto;
        margin-bottom: 4dvh;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	#loading_screen_container > #loading_image_container > img {
		object-fit: contain;
		width: 100%;
		height: 100%;
	}

	#loading_screen_container > #loading_text_container {
		position: relative;
		overflow: hidden;
		margin-top: 6dvh;
        width: 100%;
        height: auto;
        /*background: rgba(0,0,0,1);*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
		text-align: center;
	}

	#loading_screen_container > #loading_text_container > font {
		font-family: 'RobotoBold', Arial, sans-serif;
        font-size: 2.5dvw;
        color: #ffffff;
		text-decoration: none;
	}

	#loading_screen_container > .loader {
		height: 2dvh;
		aspect-ratio: 4;
		--_g: no-repeat radial-gradient(farthest-side,#fff 90%,#0000);
		background: var(--_g) left, var(--_g) right;
		background-size: 25% 100%;
		display: grid;
	}
	#loading_screen_container > .loader:before,	#loading_screen_container > .loader:after {
		content: "";
		height: inherit;
		aspect-ratio: 1;
		grid-area: 1/1;
		margin: auto;
		border-radius: 50%;
		transform-origin: -100% 50%;
		background: #53FCCB;
		animation: l49 1s infinite linear;
	}

	#loading_screen_container > .loader:after {
		transform-origin: 200% 50%;
		--s:-1;
		animation-delay: -.5s;
	}

	@keyframes l49 {
		58%,
		100% {transform: rotate(calc(var(--s,1)*1turn))}
	}
	/** END OF LOADING SCREEN **/
	/********************************************/

	/********************************************/
	/********************************************/
	/********************************************/
	/********************************************/

	/********************************************/
	/** PROCESSING SCREEN **/
	#processing_screen_container {
		position: fixed;
		z-index: 3;
		overflow: hidden;
        width: 100%;
        height: 100%;
        min-height: 100dvh;
		background-color: #53FCCB;
		background: linear-gradient(-45deg, #53FCCB, #226954, #0f2f26, #181818);
		background: -moz-linear-gradient(-45deg,#53FCCB 0%, #226954 33%, #0f2f26 66%), #181818 90;
		background: linear-gradient(-45deg,rgba(83, 252, 203, 1) 0%, rgba(34, 107, 86, 1) 33%, rgba(24, 24, 24, 1) 66%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#53FCCB",endColorstr="#181818",GradientType=0);
        background-size: 400% 400%;
        -webkit-animation: gradient_anim 5s ease infinite;
        animation: gradient_anim 5s ease infinite;
		font-size: 16px;
		scroll-behavior: smooth;
		overflow-x: hidden;
		margin: 0;
		padding: 0;
        display: none;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	#processing_screen_container > #processing_image_container {
		position: relative;
		overflow: hidden;
        width: 80%;
        height: auto;
        margin-bottom: 4dvh;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	#processing_screen_container > #processing_image_container > img {
		object-fit: contain;
		width: 100%;
		height: 100%;
	}

	#processing_screen_container > #processing_text_container {
		position: relative;
		overflow: hidden;
		margin-top: 6dvh;
        width: 100%;
        height: auto;
        /*background: rgba(0,0,0,1);*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
		text-align: center;
	}

	#processing_screen_container > #processing_text_container > font {
		font-family: 'RobotoBold', Arial, sans-serif;
        font-size: 2.5dvw;
        color: #ffffff;
		text-decoration: none;
	}

	#processing_screen_container > .loader {
		height: 2dvh;
		aspect-ratio: 4;
		--_g: no-repeat radial-gradient(farthest-side,#fff 90%,#0000);
		background: var(--_g) left, var(--_g) right;
		background-size: 25% 100%;
		display: grid;
	}
	#processing_screen_container > .loader:before,	#processing_screen_container > .loader:after {
		content: "";
		height: inherit;
		aspect-ratio: 1;
		grid-area: 1/1;
		margin: auto;
		border-radius: 50%;
		transform-origin: -100% 50%;
		background: #53FCCB;
		animation: p49 1s infinite linear;
	}

	#processing_screen_container > .loader:after {
		transform-origin: 200% 50%;
		--s:-1;
		animation-delay: -.5s;
	}

	@keyframes p49 {
		58%,
		100% {transform: rotate(calc(var(--s,1)*1turn))}
	}
	/** END OF PROCESSING SCREEN **/
	/********************************************/

	/********************************************/
	/********************************************/
	/********************************************/
	/********************************************/

	/********************************************/
	/** MAIN SCREEN CONTAINER **/
	#main_screen_container {
		position: absolute;
		z-index: 0;
		overflow-x: hidden;
		overflow-y: scroll;
        width: 100%;
		height: 100dvh;
        /*background: rgba(255,255,255,1);*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: space-between;
		background-image: url("../images/bg_world_map.png");
		background-repeat: repeat-x;
		background-size: cover;
	}

	/********************************************/
	/** RESTRICTED AREA SCREEN ELEMENTS **/
	#restricted_area_container {
		position: relative;
		z-index: 0;
		overflow: hidden;
        width: 100%;
        height: auto;
		min-height: 100vh;
        background-color: rgba(198,32,38,1);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
		background-image: url("../images/flight_path_background_image.png");
		background-repeat: repeat;
	}

	#restricted_area_container > #restricted_area_content {
		position: relative;
		z-index: 0;
		overflow: hidden;
        width: 80%;
        height: auto;
		border-style: solid;
		border-color: #ffffff;
		border-width: 0.6vw;
		border-radius: 3.5vw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: flex-start;
	}

	#restricted_area_container > #restricted_area_content > #logo_container {
		position: relative;
		z-index: 0;
		overflow: hidden;
        width: 80%;
        height: auto;
		margin-top: 4vw;
		margin-bottom: 2vw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: flex-start;
	}

	#restricted_area_container > #restricted_area_content > #logo_container > img {
		object-fit: contain;
		width: 100%;
		height: auto;
	}

	#restricted_area_container > #restricted_area_content > #logo_container_2 {
		position: relative;
		z-index: 0;
		overflow: hidden;
        width: 20%;
        height: auto;
		margin-bottom: 2vw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: flex-start;
	}

	#restricted_area_container > #restricted_area_content > #logo_container_2 > img {
		object-fit: contain;
		width: 100%;
		height: auto;
	}

	#restricted_area_container > #restricted_area_content > #text_part_1 {
		position: relative;
		z-index: 0;
		overflow: hidden;
        width: 98%;
        height: auto;
		margin-bottom: 0.25vw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: flex-start;
		text-align: center;
		font-family: 'RobotoBold', Arial, sans-serif;
        font-size: 6.5vw;
        color: #ffffff;
		text-decoration: none;
	}

	#restricted_area_container > #restricted_area_content > #text_part_2 {
		position: relative;
		z-index: 0;
		overflow: hidden;
        width: 98%;
        height: auto;
		margin-bottom: 4vw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: flex-start;
		text-align: center;
		font-family: 'RobotoBold', Arial, sans-serif;
        font-size: 3.5vw;
        color: #ffffff;
		text-decoration: none;
	}

	#restricted_area_container > #restricted_area_content > #redirecting_text_container {
		position: relative;
		z-index: 0;
		overflow: hidden;
        width: 98%;
        height: auto;
		margin-bottom: 4vw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: flex-start;
		text-align: center;
		font-family: 'RobotoBold', Arial, sans-serif;
        font-size: 2vw;
        color: #ffffff;
		text-decoration: none;
	}
	
	/********************************************/
	/********************************************/
	/********************************************/
	/********************************************/

	/********************************************/
	/** LOGIN SCREEN CONTAINER **/
	#language_options_container {
		position: relative;
		z-index: 0;
		overflow-x: hidden;
        width: 100%;
        height: 6dvh;
		/*min-height: 100vh;*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
		padding-right: 2dvw;
	}

	#login_screen_container {
		position: relative;
		z-index: 0;
		overflow-x: hidden;
		overflow-y: scroll;
        width: 100%;
        height: 88dvh;
		/*min-height: 100vh;*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	#login_screen_container > #login_logo_container {
		position: relative;
		z-index: 0;
		overflow: hidden;
        width: 100%;
        height: auto;
		/*min-height: 100vh;*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
		align-content: center;
        justify-content: space-between;
	}

	#login_screen_container > #login_logo_container > .side_sticks {
		position: relative;
		z-index: 0;
		overflow-x: hidden;
        width: 15%;
        height: 4dvw;
		/*min-height: 100vh;*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	#login_screen_container > #login_logo_container > .side_sticks > img {
		object-fit: contain;
		width: 100%;
		height: auto;
	}

	#login_screen_container > #login_logo_container > #logo_container {
		position: relative;
		z-index: 0;
		overflow: hidden;
        width: 70%;
        height: 100%;
		/*min-height: 100vh;*/
		margin-bottom: 4dvw;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	#login_screen_container > #login_logo_container > #logo_container > img {
		object-fit: contain;
		width: 100%;
		height: auto;
	}

	#login_screen_container > #login_form_container {
		position: relative;
		z-index: 0;
		overflow-x: hidden;
        width: 90%;
        height: auto;
		/*min-height: 100vh;*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: flex-start;
		align-content: flex-start;
        justify-content: center;
	}

	#login_trademark_container {
		position: relative;
		z-index: 0;
		overflow-x: hidden;
        width: 100%;
        height: 6dvh;
		/*min-height: 100vh;*/
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
		text-align: center;
		font-family: 'RobotoBold', Arial, sans-serif;
        font-size: 1dvw;
        color: #ffffff;
	}
	/** END OF LOGIN SCREEN **/
	/********************************************/

	/********************************************/
	/********************************************/
	/********************************************/
	/********************************************/

	/********************************************/
	/** GLOBAL ELEMENTS **/
	.full_content_center {
		position: relative;
		z-index: 0;
		overflow-x: hidden;
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
		align-content: center;
        justify-content: center;
	}

	/********************************************/
	/********************************************/
	/********************************************/
	/********************************************/

	/********************************************/
	/** FORM ELEMENTS **/
	.m_txtbox {
		width: 100%;
		height: 6vw;
		margin-bottom: 2vw;
		font-family: 'RobotoRegular', Arial, sans-serif;
		font-size: 1.76vw;
		color: #000000;
		text-align: center;
		background-color: #ffffff;
	}

	.m_txtbox_login {
		width: 96%;
		height: 6dvw;
		margin-bottom: 1.5dvw;
		font-family: 'RobotoBold', Arial, sans-serif;
		font-size: 2dvw;
		color: #000000;
		text-align: center;
		background-color: rgba(255,255,255,0.5);
		border-style: solid;
		border-color: #ffffff;
		border-radius: 0.3dvh;
	}

	.m_txtbox_small {
		width: 100%;
		height: 6vw;
		margin-bottom: 2vw;
		font-family: 'RobotoRegular', Arial, sans-serif;
		font-size: 1.76vw;
		color: #000000;
		text-align: center;
		background-color: #ffffff;
	}

	.m_lstbox_login_languages {
		width: 25%;
		height: 85%;
		border-color: #ffffff;
		border-style: solid;
		border-width: 0.1vw;
		border-radius: 0%;
		font-family: 'RobotoBold', Arial, sans-serif;
		font-size: 1.85dvw;
		color: #181818;
		text-align-last: center;
		-webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
		background-color: rgba(83,252,203,1);
		background-image: url("../images/sb_down_arrow_black.svg");
		background-position: 95%;
		background-size: 8%;
		background-repeat: no-repeat;
	}

	.m_lstbox_login_languages > option {
		background-color: rgba(245,126,52,1);
	}

	.m_lstbox {
		width: 100%;
		height: 6.92vw;
		margin-bottom: 2vw;
		border-color: #ffffff;
		border-style: solid;
		border-width: 0.1vw;
		border-radius: 0%;
		font-family: 'RobotoRegular', Arial, sans-serif;
		font-size: 1.76vw;
		color: #000000;
		text-align-last: center;
		-webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
		background-color: rgba(255,255,255,1);
		background-image: url("../images/sb_down_arrow_black.svg");
		background-position: 98%;
		background-size: 2%;
		background-repeat: no-repeat;
	}

	.m_lstbox > option {
		background-color: rgba(255,255,255,1);
	}

	.m_lstbox_small {
		width: 100%;
		height: 6.92vw;
		margin-bottom: 2vw;
		border-color: #ffffff;
		border-style: solid;
		border-width: 0.1vw;
		border-radius: 0%;
		font-family: 'RusticaRegular', Arial, sans-serif;
		font-size: 1.76vw;
		color: #000000;
		text-align-last: center;
		-webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
		background-color: rgba(255,255,255,1);
		background-image: url("../images/sb_down_arrow_black.svg");
		background-position: 98%;
		background-size: 5%;
		background-repeat: no-repeat;
	}

	.m_lstbox_small > option {
		background-color: rgba(255,255,255,1);
	}

	.m_txtarea {
		width: 100%;
		height: 20.5vw;
		margin-bottom: 2vw;
		font-family: 'RobotoRegular', Arial, sans-serif;
		font-size: 1.56vw;
		color: #000000;
		text-align: left;
		background-color: #ffffff;
	}

	.m_button {
		width: 60%;
        height: 6vw;
        border: 0.2vw solid #ffffff;
        font-family: 'RobotoBold', Arial, sans-serif;
        font-size: 2.56vw;
        color: #ffffff;
        background: none;
		text-align-last: center;
		text-decoration: none;
		margin-top: 1vw;
		margin-bottom: 1vw;
    }
    
    .m_button:hover, .m_button:active {
        text-align: center;
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        -webkit-animation: gradient_anim 10s ease infinite;
        animation: gradient_anim 10s ease infinite;
        cursor: pointer;
    }

	.m_button_login {
		width: 50%;
        height: 5.8dvw;
        border: 0.1dvw solid #ffffff;
        font-family: 'RobotoBold', Arial, sans-serif;
        font-size: 2.45dvw;
        color: #181818;
        background: none;
		text-align-last: center;
		text-decoration: none;
		margin-top: 2dvw;
		margin-bottom: 1dvw;
		background-color: rgba(83,252,203,1);
		border-radius: 0.3dvw;
    }
    
    .m_button_login:hover, .m_button_login:active {
        text-align: center;
        background: linear-gradient(-90deg, #53FCCB, #226954, #53FCCB, #226954);
        background-size: 300% 300%;
        -webkit-animation: gradient_anim 3s ease infinite;
        animation: gradient_anim 3s ease infinite;
        cursor: pointer;
    }

	/****************************************************************/
	/****************************************************************/

	/* FONTS */

	.res_form_title {
		font-family: 'RobotoBold', Arial, sans-serif;
		font-size: 2vw;
		margin-bottom: 0.25vw;
		color: #ffffff;
	}

	.res_form_group_title {
		font-family: 'RobotoBold', Arial, sans-serif;
		font-size: 3.15vw;
		margin-bottom: 1.25vw;
		color: #ffffff;
	}

	.res_ver_title {
		font-family: 'RobotoBold', Arial, sans-serif;
		font-size: 6.2vw;
		color: #ffffff;
	}

	.res_ver_text_small {
		font-family: 'RobotoRegular', Arial, sans-serif;
		font-size: 3.15vw;
		color: #ffffff;
		margin-bottom: 4vh;
	}

}
/* END OF Tablet - Portrait */
/************************************************************************/